CSSをもっと扱いやすく!Sass (SCSS)の基本を学ぶ
Sassとは、CSSをもっと扱いやすくした言語です。
基本的に、CSSでできることはSassで全てできると思います。
では、SassはCSSと何が違うのか。
1. コメントの仕方
CSSだと /*コメントここ*/ のように記述します。
これ、はっきり言って面倒です。
しかし、Saaaだと
//コメント
よく他のプログラミング言語でも使われているスラッシュを2回打つだけでコメントが書けます。何気にすごい便利です。便利というか、快適です!
2. 変数が使える!
これが、CSSとは機能面で大きく異なる点です。
例えば、私がよく使うグレーは、#f7f8f8なのですが、
$myColor: #f7f8f8; div { background-color: $myColor; }
このように自分で定義した変数を使うことができます。
あの色なんだっけ?ってならずに済みます。
さらに、変数の中には、もっとCSSを入れることができます。
@mixin base { background-color: #000; color: #fff; } div { @include footer-base; }
こんな具合に@mixinと書くことで、その中にCSSを登録しておき、
@includeで呼び出すことができるのです。
これで同じコードを書かなくて済みます。
さらに、関数みたいなこともできてしまう!
数学でいうf(x)みたいなものですね。
@mixin base($color) { background-color: gray; color: $color; } p { @include base(blue); }
3. ネストが使える!
例えば、こんなcss
.classname p {
color:#000
}
.classname p span {
color:#red
}
これが、scssだとこんな感じに書けてしまいます。
.classname {
p {
color:#000;
}
span {
color:red;
}
}
この他にもimportなどの便利な機能があったりします。
jadeやscssを導入することで記述量が減り、コードを書くスピードが上がります。
もちろん慣れるまで少し時間がかかりますが。
仕事としては、「面倒くさい」という感覚はあまり良くないかもしれませんが、
効率化するために「面倒くさい」という感覚を大切にしたいです。
jadeとscss使ってみてはどうですか?