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

@extend: 継承について

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

Sassでは、@extendを使用して、スタイルを継承することができます。例えば、下記のようなスタイルがあるとします。

.txt{
	color: #f00;
	font-size: 12px;
	line-height: 18px;
}

この.txtというクラスのスタイルを、他のセレクタにも使いたい場合、例えば、下記のような

div p{
	color: #f00;
	font-size: 12px;
	line-height: 18px;
}

この場合は、同じスタイルを2箇所で記述していることになりますので、継承することで簡単になります。
継承の記述方法は、下記です。

@extend セレクタ名;

上記の場合は、下記のような記述で簡単にすることができます。

div p{
	@extend .txt;
}

使い方の参考例として

Sass
.fontSmall{
	color: #666;
	font-size: 12px;
	line-height: 18px;
}

.fontMiddle{
	color: #333;
	font-size: 14px;
	line-height: 20px;
}

.fontLarge{
	color: #000;
	font-size: 16px;
	line-height: 24px;
}

.itemA{
	margin: 0;
	padding: 0;
	p{
		@extend .fontSmall;
	}
}

.itemB{
	width: 960px;
	height: 640px;
	p{
		@extend .fontMiddle;
	}
}

.itemC{
	position: relative;
	top: 0; left: 0;
	p{
		@extend .fontLarge;
	}
}
CSS – コンパイル後
.fontSmall, .itemA p {
	color: #666;
	font-size: 12px;
	line-height: 18px;
}

.fontMiddle, .itemB p {
	color: #333;
	font-size: 14px;
	line-height: 20px;
}

.fontLarge, .itemC p {
	color: #000;
	font-size: 16px;
	line-height: 24px;
}

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

.itemB {
	width: 960px;
	height: 640px;
}

.itemC {
	position: relative;
	top: 0;
	left: 0;
}