SASSミックスイン内のコンテンツブロック

ミックスイン内にスタイルのブロックを渡すには、ディレクティブ @content を使用します。ここに必要なスタイルが配置されます。

例を見てみましょう:

@mixin active {
	* div {
		@content;
	}
}

@include active {
	#block {
		color: red;
	}
}

コンパイル結果:

* div #block {
	color: red; 
}

@content ディレクティブを複数回指定するか、ループ内で使用する場合、スタイルブロックも同じ回数だけ呼び出されることを知っておく必要があります。

@mixin active {
	div {
		@content;
	}
navbar {
		@content;
	}
}
@include active {
	#block {
		color: red;
	}
	button {
		color:green;
	}
}

コンパイル後、次の結果が表示されます:

div #block {
	color: red; 
}
div button {
	color: green; 
}

navbar #block {
	color: red; 
}
navbar button {
	color: green; 
}

次のコードのコンパイル結果はどうなりますか？

@mixin super-link {
	a {
		@content;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

次のコードのコンパイル結果はどうなりますか？

@mixin super-link {
	a {
		@content;
	}
	a .primary-link{
		@content;
		font-weight: bold;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

次のミックスインがあるとします:

@mixin colors {
	...
}

@content ディレクティブを使用して、 #primary に関連するすべてのリンクのフォントカラーを青に、下線を波線に設定してください。