「Sass」皆さんはご存じでしょうか？
Web開発をされているエンジニアの方々はよくご存じかと思います。（私は最近知りました...）
結論から言うとこのSassですが、覚えることでcssのコーディング速度が格段に向上します！
仕事は捗り、残業は減り、余暇を楽しめ、人生が好転し始めるでしょう...
そしてなによりコーディングが楽しくなります！
これはもう導入せざるを得ませんね...早速ご紹介します。
Sassとは
"Syntactically Awesome StyleSheet" = 「文法的に素晴らしいスタイルシート」
簡単に言うとCSSを拡張し、より見やすく、書きやすくしたものです。
Sassで記述したものをCSSにコンパイルし、使用します。
SASS記法とSCSS記法
実はSassには上記2つの記法があり、ファイルの拡張子も"○○.sass", "○○.scss"と異なってきます。
詳細の説明は省きますが、現在では主にSCSS記法が使われており、本記事でもそちらで進めます。
とりあえず触ってみる
ここでは環境構築の説明は省いて、下記のサイトを使用したいと思います。
（環境構築自体も非常に簡単なので、興味が湧きましたらぜひ試してみてください。）
SCSS記法で書いたコードをCSSにコンパイルすることができます。
使用例は下記のような形です。
左側がSass、右側がコンパイルされたCSSです。
セレクタの階層化
まずはセレクタをネストする記述から始めます。
例えば以下のようなCSSを記述したいとします。
sample.css
html {
background: #000;
}
html div {
display: inline-block;
}
html div p {
color: #fff;
}
SCSS記法では下記のようにネストして記述することができます。
直感的になり、記述量も減らすことができました。
sample.scss
html {
background: #000;
div {
display: inline-block;
p {
color: #fff;
}
}
}
変数の使用
Sassでは変数を使うこともできます。
例えば上記のコードを変数を用いて書き直すと下記のようになります。
sample.scss
$mainColor: #000;
$subColor: #fff;
html {
background: $mainColor;
div {
display: inline-block;
p {
color: $subColor;
}
}
}
コンパイル後のCSSに変数が吐き出されることはありません。
非常にプログラミングチック（？）になり、保守性が高まります。
まとめ
実はまだまだ紹介できていない機能（継承、条件分岐、関数、etc.）がたくさんあります。
ただ、ここまで紹介した内容でも十分効率アップを図れると思います。
触れてみて、興味が湧きましたらぜひ調べてみてください。
Sass最高！！
↧