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

@extend : @extendが使えないセレクタ

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

@extendが使えないセレクタがいくつかあります。

@extendが使えないセレクタ

Sass
//子孫セレクタ
.item p{
	margin: 0;
	padding: 0;
}

//子セレクタ
.item > p{
	margin: 0;
	padding: 0;
}

//隣接セレクタ
.item + p{
	margin: 0;
	padding: 0;
}

//間接セレクタ
.item ~ p{
	margin: 0;
	padding: 0;
}

@media内で@extendを使用したい場合は、@media内がスコープとなります。

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

@media screen and (max-width:960px){

	.itemB{
		color: #000;
		font-size: 12px;
		line-height: 28px;
	}

	p{
		@extend .itemA;
	}

	span{
		@extend .itemB;
	}

}
CSS – コンパイル後
.itemA {
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 960px) {

	/*
		.itemAを継承しようとしたpセレクタがコンパイルされていない
	*/

	.itemB, span {
		color: #000;
		font-size: 12px;
		line-height: 28px;
	}

}