SCSSとは、変数や関数、または入れ子(ネスト)やクラスの継承を使って、効率的にCSSを生成するための言語です。
CSSには、同じ文字の繰り返しが多く、また、親子関係のクラスでほとんど同じだが、一部だけ違うといった微調整が必要で、どうしてもコードが長く、煩雑になりがちです。
そこで生まれたのがこの言語。CSSを作り出す言語なので、コンパイルが必要ですが、Railsでは自動で変換してくれるようですし、要は本番環境にリリースする際に、CSSを生成してやればよいのです。
SCSSの形で運用すれば、継ぎはぎで膨大な量のコードを解読することを防ぎ、動的なコンテンツへの応用もできると思います。
SCSS タグのネスト
#myId { margin: 5px; a { color: #0FF; &:hover { color: #0FF; } } }CSS 出力
#myId { margin: 5px; } #myId a { color: #0FF; } #myId a:hover { color: #0FF; }SCSS ハイフンのネスト
.line { border: { bottom: { width: 5px; color: #F00; } } }CSS 出力
.line { border-bottom-width: 5px; border-bottom-color: #F00; }SCSS 変数
$myColor: #789; #myId { color: $myColor; }CSS 出力
#myId { color: #789; }SCSS 繰り返し1
@each $x in A, B, C { .my_#{$x} { background-image: url('/#{$x}.gif'); } }CSS 出力
.my_A { background-image: url("/A.gif"); } .my_B { background-image: url("/B.gif"); } .my_C { background-image: url("/C.gif"); }
SCSS 繰り返し2
$i: 1; @while $i < 4 { .my_#{$i} { background-image: url('/#{$i}.gif'); } $i: $i + 1; }CSS 出力
.my_1 { background-image: url("/1.gif"); } .my_2 { background-image: url("/2.gif"); } .my_3 { background-image: url("/3.gif"); }
上記の他にもたくさんの便利な関数や、定義があります。
こうしてみると、SCSSは効率化や可読性には長けていますが、改善速度や作画的な用途のときはCSS直書きのほうが、運用しやすそうな気もします。コーダーとデザイナーでどちらが担当するか、おもしろいところだと思います。
リアルタイムに変換してくれるオンラインのこちらのツールがとても便利です。