Sassの便利機能：親セレクタの参照&（アンパサンド）について

アンパサンド（&）について

アンパサンドとは、親セレクタを参照することを言います。親セレクタを参照するとはどういうことなのか、実際のコードを見ながら説明していきます。

a {
    display: block;
    background-color: #000;
    color: #fff;
}

a:hover {
    background-color: #999;
    color: #000;
}

上記は普通のCSSファイルで、リンクタグのCSSを書いてみました。CSSのhoverを使って色を変える、これはよく使うものです。

a {
    display: block;
    background-color: #000;
    color: #fff;
    &:hover {
        background-color: #999;
        color: #000;
    }
}

実際にSCSSで書いてみるとこのようになります。&を使って、入れ子にして書くことでどのリンクのhoverかもわかりやすくなります。nth-childやbefore,afterなどのプロパティも&を使って書くことができます。

ボタンなど汎用性の高いものにも使いやすい

HTML

<div>
    <button class="button button-normal button-black">
    ボタン1
    </button>
    <button class="button button-small button-red">
    ボタン２
    </button>
</div>

CSS

.button {
    display: inline-block;

    &-normal {
        width: 200px;
        height: 40px;
    }
    &-small {
        width: 80px;
        height: 20px;
    }
    &-black {
        background-color: #000;
        color: #fff;
    }
    &-red {
        background-color: #ff0000;
        color: #fff;
    }
}

このようにbuttonという要素にクラス名をマルチクラス（クラス名を複数つけること）でつけます。こうすることで、buttonの形や色をアンパサンドを使って簡単に分けることができます。

最初のbutton-というクラス名を一緒にすれば、このように＆を使ってCSSを書くことができます。