吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

プレースホルダーセレクタについて

2014年3月1日 / category : reference-sass, sass

継承元のセレクタも、コンパイル時にCSSに生成されます。しかし、@extend専用として、セレクタを用意したい場合も当然出てくると思います。その場合、頭に%(パーセント)を付けて定義するプレースホルダーセレクタと呼ばれるセレクタを用意することで、この継承元はコンパイル時にCSSとして生成されることはなくなります。

プレースホルダーセレクタの参考例

Sass
.itemA{
	margin: 0;
	padding: 0;
}

%itemB{
	color: #000;
	font-size: 12px;
	line-height: 18px;
}

.classA{
	@extend .itemA;
}

.classB{
	@extend %itemB;
}
CSS – コンパイル後
.itemA, .classA {
	margin: 0;
	padding: 0;
}

/*
Sassで設定した%itemBセレクタがCSSに生成されていない。
*/

.classB {
	color: #000;
	font-size: 12px;
	line-height: 18px;
}