【CSS】エンジニアなら知っているSassの世界

「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最高！！