Sassを使って2カラムのサイトを簡単に作ろう
はてなブックマーク - Sassを使って2カラムのサイトを簡単に作ろう
Pocket

今回のエントリーでは、前回紹介したSassを利用して簡単に2カラムのサイトを作ってみます。SassはCSSをプログラミングのように組める言語となっていて、変数が使用できます。その変数を利用することで2カラムサイトが簡単にできてしまいます。では実際に出来上がったものを見てもらいましょう。

以下がHTMLとSassのソースとなります。

既に他のC言語やjavaScriptなどの言語を習得している方は、Sassのソースを見てだいたいは見当がつくのではないでしょうか。やっていることはすごく簡単です。「$(ダラー)」を先頭に記述している文字列が変数となっていて、marginなどの幅に関係している要素を全て加算し、サイト全体のwidthを計算しています。
実際はmarginだけでなく、paddingやborder幅も含まれてきますが、今回のテストソースではできる限りシンプルにするため除いています。

ここまではCSSと何ら変わらないのでは?と思いになるかもしれません。しかしSassを利用したCSS作成の本当の真価は、修正時に発揮されます。では右のカラムの幅を大きくして、左のカラムの幅を小さくしてみましょう。変更するソースは以下です。

変更後のサイトデザインは以下になりました。

今までCSSで「幅を変えたからここのマージンを調整して……あ、カラムがずれた、あれどこが計算間違いしてるのかな……」なんてことに時間を取られた方はいるのではないでしょうか。というより、悩まされたのは私です;;。今回はSassを使用しましたが、変数の機能を持ったものはSassだけでなくLESSなどいろいろあります。今回のエントリのようなテンプレートを少しずつ増やしていき、簡単にデザインができるよう蓄積していくことで、より自分が楽をすることができます。ぜひ使ってみてください。