Sass:隣の要素をまとめるCSSの書き方( + )と比較してみた
はてなブックマーク - Sass:隣の要素をまとめるCSSの書き方( + )と比較してみた
Pocket

今回のエントリーでは、 Sass による隣の要素(隣接セレクタ)をどうまとめるかについて書いてみます。隣接したセレクタを書く場合は「 + 」を使います。これを Sass の場合どう書くのかというお話です。親参照セレクタの変わった使い方以外は、ほとんど CSS の機能のままですね。ネストして CSS を書けるので読みやすくなるくらいだと思います。

 

 

CSS

元となるCSSソース + を使う

+ を使うことで、h1 の直下に h2 が来る場合に CSS を適用することができます。
 
セレクタを限定して、 h1 と h2 だけの共通項目を書くことができます。

 
 

Sass

Sassで隣接セレクタ(+)を使う

Sass を使うことで入れ子で書くことができます。 CSS と比べたら読みやすいです。
 
コンパイル後は以下の CSS に変換されます。

 
 

Sassの親参照セレクタ(&)と隣接セレクタ(+)を使う

親参照セレクタの変わった使い方です。二種類の書き方ができます。読みづらいのでいつも通り「 + 」を使って書いた方がいいかもしれません。
 
コンパイル後は以下の CSS に変換されます。

 
 

以上が CSS と Sass の隣の要素をまとめる方法でした。他にこんなのもある!ということを教えてくれる方がいらっしゃれば、是非 Twitter にてご連絡ください。お待ちしています!