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

@extend : 継承しているセレクタをさらに継承する

2014年2月28日 / category : reference-sass, sass

@extendによる継承を2重3重と重ねることができます。

.classA{
	color: #f00;
}

.classB{
	@extend .classA;
}

.classC{
	@extend .classB;
}

classCクラスが、classBを継承しており、そのclassBが、classAを継承ています。

使い方の参考例として

Sass
.txt{
	color: #333;
	font-size: 12px;
	line-height: 18px;
	text-decoration: underline;
}

.link{
	@extend .txt;
	&:hovre{
		color: #666;
		text-decoration: none;
	}
}

p a{
	@extend .link;
}
CSS – コンパイル後
.txt, .link, p a {
    color: #333;
    font-size: 12px;
    line-height: 18px;
    text-decoration: underline;
}

.link:hovre, p a:hovre {
    color: #666;
    text-decoration: none;
}