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">
    ボタン2
    </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を書くことができます。


イベント

2017/12/05(火)
Design Thinking Square