Sassの便利機能:親セレクタの参照&(アンパサンド)について

アンパサンド(&)について

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

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

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

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

HTML

CSS

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集