「The 1Kb CSS Grid」をSCSS化してみた

CSS フレームワークについて調べていたところ、「どんなCSSフレームワークがあるのか調べてみた一覧と感想 – ふじこのプログラミング奮闘記」で The 1Kb CSS Grid というフレームワークを見つけました。

他の多くのフレームワークには、レイアウトだけでなく、タイポグラフィーやフォーム要素のスタイルなども含まれていますが、The 1Kb CSS Grid はグリッドシステムのみ。コードは至ってシンプルで使いやすい！のですが、ダウンロードの際にグリッドの定義を決めなければならないので、異なる定義が欲しい時に、毎回ダウンロードしなければならず、ちとめんどくさい。

ということで、変数の値を変えるだけでOKなように、SCSS化してみました。

Grid Settings のところにある、3つの変数（$columns, $col_width, $gutter）の値を変えてコンパイルすれば、好きな定義の CSS が手に入りますです。

[追記]

オリジナルの The 1Kb CSS Grid では、.column と .grid_xx を必ずセットで指定しなければならないようです。

たぶんCSS の管理上、クラスを分けてるんでしょうが、HTMLのコードがあまりにも冗長。というわけで、@extend を使ってちょっと変更してみました。

これで、CSS（SCSS）の管理も問題ないし、HTMLもより簡潔に書けます。