Sass+Compass勉強会からだいぶ時間も経っていますが、参加された方、バリバリ書いておられますでしょうか？

僕の方はといえば、自分ひとりで完結できるボリュームだったり、運用フェーズでCSSをあまり書き足さないような、割と安心できるものから使っています。
ちなみに会社で使おうとしたところ、WindowsとMacでSJISとUTFの問題で色々と導入が面倒臭い感じになっていたので、ううーん。といったところです。
とはいえ・・・

chcp 65001
compass w

こんな感じのcompass.batという名前で保存したものを用意して、こいつでCompassの監視を開始させたりして誤魔化してますけども・・・。

ということで、ノリで作った結果、毎回のように使っているオレオレグリッドシステムを紹介させていただきます！

オレオレグリッドシステム

基本設定で、カラム数、最大幅（カラム間余白も加味した数字で）、カラム間余白を設定するだけで、.w1、.w2、.w3・・・といった形で、グリッドごとの横幅を設定したstyleが呼び出せるというものです。

もし、.w1～が美しくないと感じた場合、@include column(グリッド幅)で呼び出せばOK！

こいつをSassの適当に毎回触りやすい最初の方の行に適当に書いてます。

外部化して読み込むとスマートですね！

Sass

こんな感じでscssファイルに記述しています。

とてもシンプル！

// basic setting
$maxcol:12; //カラム数
$max-width:960px; //最大幅
$margin:15px; //カラム間余白

// mixin
// grid system
@mixin column($col){
	margin:$margin;
	width:$max-width / $maxcol * $col - $margin * 2;
}
// loop
@for $i from 1 through $maxcol {
	.w#{$i} {
		@include column($i);
	}
}

CSS

書き出されるCSSはこんな感じになります。

.w1 {
 margin: 15px;
 width: 50px;
}

.w2 {
 margin: 15px;
 width: 130px;
}

.w3 {
 margin: 15px;
 width: 210px;
}

.w4 {
 margin: 15px;
 width: 290px;
}

.w5 {
 margin: 15px;
 width: 370px;
}

.w6 {
 margin: 15px;
 width: 450px;
}

.w7 {
 margin: 15px;
 width: 530px;
}

.w8 {
 margin: 15px;
 width: 610px;
}

.w9 {
 margin: 15px;
 width: 690px;
}

.w10 {
 margin: 15px;
 width: 770px;
}

.w11 {
 margin: 15px;
 width: 850px;
}

.w12 {
 margin: 15px;
 width: 930px;
}

カラム間余白や横幅、カラム数を自分で設定することによって、柔軟なコーディングができそうな手応えが！
CSSも、変数、mixin、ループを使えるだけでこんなにシンプルに書けるんです。
まだSass未経験の方は是非Sassでオレオレコーディングスニペットを作って素敵なコーディングライフを！