Sassのmap操作をおさらいする+便利な関数をいくつか - wadackel.me
Less や Stylus、Sass などの CSS プリプロセッサはもう手放せないツールの一つとなって久しい感じです。僕は業務内/プライベート問わず、スタイルの殆どを Sass(Scss)を使って書いています。 ただ、一旦覚えた知識のまま惰性で使っている点もあったりするので、改めて色々と調べてみたりして自分自身の知識を更新したいなと思い、中でもまだまだ使いこなせていなかった map に関する諸々をおさらいしてみました。 map とは? もう導入されてかなり経つので沢山の人が使っていると思いますが、Sass v3.3 以降に追加されたデータ型で、連想配列みたいに扱うことが出来るというものです。 以下はボタンのサイズを書き出す簡単なサンプルコードです。冒頭で宣言している変数の$btn-sizesが map に当たります。 $btn-sizes: ( sm: 20px, md: 30px, l
Markdown Driven な scaffolding ツールを作った - wadackel.me
はじめにタイトルにある通り、scaffdog という scaffolding のためのツールを作りました。Node.js で書いています。 scaffdog https://github.com/cats-oss/scaffdog スカーフを巻いた犬がロゴ… Markdown で記載されたテンプレートに従ってファイルを生成するものとなっています。 具体的には次のようなテンプレートです。 --- name: 'component' description: 'Generate standard React component.' message: 'Please enter component name.' root: 'src' output: '**/*' ignore: [] --- # `{{ input | pascal }}/index.js` ```javascript exp
PinterestなレイアウトのためのReactコンポーネントを作った - wadackel.me
ここ最近はずっと、前の記事で書いた Web サービスをコツコツ作り進めています。その中で、よくある Pinterest っぽいレイアウトを使いたかったのですが、既存の React コンポーネントがやりたいこととマッチしなかったので ReactStackGrid というコンポーネントを作りました。 リポジトリは以下です。 wadackel/react-stack-grid https://github.com/wadackel/react-stack-grid DEMO 実際の動作は GitHub Pages から確認できます。 https://wadackel.github.io/react-stack-grid/ 単純な<div>を使った矩形と、画像を入れ込んだサンプルとなっています。幾つかのアニメーション用のプリセットもあるので是非試してみてください。 手持ちの iPhone6s でも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
