TwitterBootstrapのgridシステムを参考にシンプルなgrid.scssを作った

scssでgridレイアウトをしたかったけど、 1KB CSS Gridが惜しい感じだったのと、Twitter BootstrapがLessだったのと、ピンポイントでシンプルに使いたかったので参考にして同じ処理を作ってみた。(sassバージョンもあったけど)

まず、定数となるところはmixinでファイルを分離しておきました。

mixinでgridシステム本体を作りました。

あとは、includeしてセレクタを作ってあげます。
Fixed-Widthな場合は.columクラスセレクタ、Fluid/Liquidな場合は.fluid-columクラスセレクタを使います。
(クラスセレクタ名は定数で設定してます)

これで次のように使う感じです。

Fluid/Liquidな場合のoffsetがあれなのと、IEとかはこのままではつかえないので、修正の必要があるけど
ざっくりしたもの作るときに便利かも。

ちなみにFixed-Widthレイアウトの場合、pxに小数点以下が入ることもあるんですけど、ブラウザで処理が違っているのでその辺は直さないと行けないですね。
(http://parashuto.com/rriver/responsive-web/sub-pixel-rounding-browser-problem)