Sassで最も使う機能はCSSをHTMLの記述通りに入れ子で書くことができるネストだと思います。
Sassの基本機能ネスト
通常のCSSの場合は各要素にスタイルを指定するために、以下のように書きます。
body header { padding: 0; } body header h1 { padding: 10px; border-left: 5px solid #fff; } body header p { line-height: 1.7; margin-bottom: 20px; }
これをSassのネストを利用して書くと以下のようになります。
body { header { padding: 0; h1 { padding: 10px; border-left: 5px solid #fff; } p { line-height: 1.7; margin-bottom: 20px; } } }
Sassは入れ子にできることによって、通常のCSSと比べ記述量が減ります。また header を section に変える場合でも1カ所変更するだけで対応できます。
ネストは非常に便利なのですが、トップページだけheaderのプロパティの値を変えたい場合にどうしたらいいのでしょうか?
まあ難しく考えずに、入れ子の外に以下のように追加すれば対応できます。
body.top { header { padding: 20px; } }
ただ、この書き方だとせっかくネストを利用して可読性が良くなっているのに、ネストの外に記述しないといけないので台無しです。
そこで、ネストの中で親のセレクタを参照できる方法が&(アンパサンド)です。
親セレクタの参照が可能な&(アンパサンド)
以下のようにセレクタの後に & を書くことで親セレクタを参照できます。
body { header { padding: 0; body.top & { padding: 20px; } h1 { padding: 10px; border-left: 5px solid #fff; } p { line-height: 1.7; margin-bottom: 20px; } } }
&(アンパサンド)は1つ上の階層のセレクタを繰り返し記述するので、以下のような擬似クラスにも使えます。
a { color: #999; &:hover{ color: #555; } }
&(アンパサンド)はSassの基本機能ですが、使用せずにネストを利用するとソースの可読性が悪くなりもったいないです。
うまく活用して構造の把握がしやすいソースにしましょう。