アンパサンド（&）について
アンパサンドとは、親セレクタを参照することを言います。親セレクタを参照するとはどういうことなのか、実際のコードを見ながら説明していきます。
|
1 2 3 4 5 6 7 8 9 10 |
a { display: block; background-color: #000; color: #fff; } a:hover { background-color: #999; color: #000; } |
上記は普通のCSSファイルで、リンクタグのCSSを書いてみました。CSSのhoverを使って色を変える、これはよく使うものです。
|
1 2 3 4 5 6 7 8 9 |
a { display: block; background-color: #000; color: #fff; &:hover { background-color: #999; color: #000; } } |
実際にSCSSで書いてみるとこのようになります。&を使って、入れ子にして書くことでどのリンクのhoverかもわかりやすくなります。nth-childやbefore,afterなどのプロパティも&を使って書くことができます。
ボタンなど汎用性の高いものにも使いやすい
HTML
|
1 2 3 4 5 6 7 8 |
<div> <button class="button button-normal button-black"> ボタン1 </button> <button class="button button-small button-red"> ボタン２ </button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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を書くことができます。
