Blok Konten dalam Mixin di SASS

Untuk meneruskan blok gaya di dalam mixin, kita menggunakan direktif @content, yang akan digantikan oleh gaya yang kita butuhkan.

Mari kita lihat contoh:

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

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

Hasil kompilasi:

* div #block {
	color: red; 
}

Perlu diketahui bahwa jika kita menentukan direktif @content lebih dari satu kali atau di dalam loop, maka blok gaya akan dipanggil sebanyak itu pula.

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

Setelah kompilasi, kita akan melihat:

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

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

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Misalkan Anda memiliki mixin berikut:

@mixin colors {
	...
}

Dengan menggunakan direktif @content, tetapkan warna font biru dan garis bawah bergelombang untuk semua tautan yang terkait dengan #primary.