最近はsassでcssをコーディングしています。今回カラムレイアウト用のcssを組む必要があったのですが、sassの繰り返し文を使ったら面倒な作業も割りと簡単に出来たので、備忘録として残しておこうと思います。グリッドデザインをする際にはこのサイトが便利かもしれません。

自分用メモ

サイトの幅は978px。幅が26pxでマージン（右）が30pxのカラムを18カラムを作るためのscssはこんな感じ。

$default-grid-width: 26px;
$default-grid-margin: 30px;
//for文で18回繰り返し変数$iに値を入れています
@for $i from 1 through 18 {  
//grid+カラム数でcss出力されるようにしています
.grid#{$i}, {
float: left;
display: inline;
//widthのデフォルト値26pxに変数$iの数字を掛けたものと、マージンのデフォルト値30pxに変数$iから1引いた値を掛けたものを足す。
width:$default-grid-width * $i + $default-grid-margin * ($i - 1);
padding: 0;
margin-right: $default-grid-margin;
background:#87ceeb;
}
}

コンパイルするとこんなようなcssが出来上がっています。

/* line 88, ../sass/style.scss */
.grid1 {
float: left;
display: inline;
padding: 0;
margin-right: 30px;
width: 26px;
background: #87ceeb;
}
/* line 88, ../sass/style.scss */
.grid2 {
float: left;
display: inline;
padding: 0;
margin-right: 30px;
width: 82px;
background: #87ceeb;
}
/* line 88, ../sass/style.scss */
.grid3 {
float: left;
display: inline;
padding: 0;
margin-right: 30px;
width: 138px;
background: #87ceeb;
}
【中略】
/* line 88, ../sass/style.scss */
.grid17 {
float: left;
display: inline;
padding: 0;
margin-right: 30px;
width: 922px;
background: #87ceeb;
}
/* line 88, ../sass/style.scss */
.grid18 {
float: left;
display: inline;
padding: 0;
margin-right: 30px;
width: 978px;
background: #87ceeb;
}

数行書けばいいだけなのでらくちんですね。