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

@content : @mixinにスタイルセットを渡す

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

@mixinに、@contentという機能を足すことができます。@contentが何かというと、実行処理の@includeから@mixinにスタイルセットを渡すことができる機能です。
正直なところ、今でも使い方にピンときませんが、紹介いたします。

@mixin 関数名(){

	//処理内容

	セレクタ{
		@content;
	}

}

.class{
	@include 関数名(){
		color: #f00;
	};
}

こんな感じの記述になります。CSSにコンパイルするとどうなるか。

.class{

	//処理結果

	セレクタ{
		color: #f00;
	}

}

こうなります。ピンとこないと思いますので、下記に参考例を紹介します。

@contentを使用した参考例

Sass
@mixin setBox($w: 240, $h: 240){
	width: $w + px;
	height: $h + px;
	background: #c00;
	.txt{
		padding: 12px;
		color: #fff;
		@content;
		font-weight: bold;
	}
}

.boxA{
	@include setBox(360, 360){
		font-size: 12px;
	};
}

.boxB{
	@include setBox(180, 180){
		font-size: 14px;
	}
}
CSS – コンパイル後
.boxA {
    width: 360px;
    height: 360px;
    background: #c00;
}
.boxA .txt {
    padding: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.boxB {
    width: 180px;
    height: 180px;
    background: #c00;
}
.boxB .txt {
    padding: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

@mixinの引数にセレクタを入れると面白いことができそう?

Sass
@mixin setBox($w: 240, $h: 240, $selector: 'p'){
	width: $w + px;
	height: $h + px;
	background: #c00;
	#{$selector}{
		padding: 12px;
		color: #fff;
		@content;
		font-weight: bold;
	}
}

.boxA{
	@include setBox(360, 360, 'p'){
		font-size: 12px;
	};
}

.boxB{
	@include setBox(180, 180, 'span'){
		font-size: 14px;
	}
}
CSS – コンパイル後
.boxA {
	width: 360px;
	height: 360px;
	background: #c00;
}
.boxA p {
	padding: 12px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

.boxB {
	width: 180px;
	height: 180px;
	background: #c00;
}
.boxB span {
	padding: 12px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}