Sassで&による親セレクタ参照

この記事を読んでSassで今までこれ知らなくて損してたわーと思った機能があったのでご紹介。ネタ元はLESSですがSassでも問題なく利用できます。

Sassでは&を利用することで親のセレクタを参照することができます。例えば以下のように記述すると。

a{
	color:red
	&:hover{
		color:blue;
	}
}

次のようなCSSが書き出されます。

a{
	color:red
}
a:hover{
	color:blue;
}

このように&の箇所が親のセレクタに置き換わりCSSが生成されます。

&の前にセレクタを記述することも可能です。例えばIE6だけちょっと表示を変えたい場合は&の前に「* html」と追加するだけでIE6用のCSSハックが利用できるようになります。

.foo{
	width:100%;
	* html &{
		width:99%;
	}
}

これは、次のようなCSSが生成されます。

.foo{
	width:100%;
}
* html .foo{
	width:99%;
}

&の前にセレクタを記述することができると知らずに、これまでネスト外に記述すると手間のかかる事をやっていましたので、社内にあるWeb制作者のためのSassの教科書を読みながらSassの復習中です。結構知らないことがのっていて勉強になります。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー