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 繰り返し１
@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 繰り返し２
$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直書きのほうが、運用しやすそうな気もします。コーダーとデザイナーでどちらが担当するか、おもしろいところだと思います。
リアルタイムに変換してくれるオンラインのこちらのツールがとても便利です。
