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

　

　

CSS

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

div.container h1 {
    color: orange; }
div.container h2 {
    color: blue; }
div.container h1 + h2 {
    font-size: 20px; }

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

　
　

Sass

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

div.container {
    h1 {
        color: orange;
    }
    h2 {
        color: blue;
    }
    h1 + h2 {
        font-size: 20px;
    }
}

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

div.container h1 {
    color: orange; }
div.container h2 {
    color: blue; }
div.container h1 + h2 {
    font-size: 20px; }

　
　

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

div.container {
    h1 {
        color: orange;
        & + h2 {
            font-size: 20px;
        }
    }
    h2 {
        color: blue;
    }
}

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

div.container h1 {
    color: orange; }
div.container h1 + h2 {
    font-size: 20px; }
div.container h2 {
    color: blue; }

　
　

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