Sassの使い方　CSSをより便利かつ効率的に扱う方法

Sassとは

「Syntactically Awesome StyleSheet」の略でCSSをより便利かつ効率的に扱うことができる言語です。

書き方は「SASS記法」と「SCSS記法」の２種類があります。

個人的には、CSSの記法に近い「SCSS記法」が分かりやすいと思いますので、ここでは「SCSS記法」で話を進めていきたいと思います。

まずは、入れ子構造を紹介します。同じ記述を繰り返し書かなくてもよくなるので、記述量を減らせます。

入れ子構造を使うと上図のCSSを下図のように書き換えることができます。

Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定することができます。

入れ子構造はより大規模なサイトになるほど絶大な効果を発揮します。

特に入れ子構造を使うとクラス名の変更が楽になります。

上の図のheaderというクラス名を変えたい場合、

CSSでは3箇所変える必要がありますが、Sassでは1箇所の変更で済ませることができます。

入れ子構造を使うことによって「&:hover」というように、書き換えることができます。

この「＆」は「hover」だけでなく、「active」などにも使うことが出来ます。

上の図を下の図に書き換えることが出来ます。

「li:hover」=「&:hover」

入れ子構造では、同じ扱いとなります。