Direktif @media dalam SASS

Dalam SASS, direktif @media diterapkan dengan cara yang sama seperti aturan yang sesuai di CSS. Dan juga direktif ini dapat disarangkan langsung ke dalam semua aturan CSS. Perlu dicatat bahwa dalam kasus ketika kita menyarangkan direktif @media ke dalam aturan CSS, setelah kompilasi direktif ini akan naik ke atas stylesheet, dan selector-selector, tempat direktif tersebut ditempatkan, akan dipindahkan ke dalam @media. Berdasarkan hal ini, kita dapat menambahkan aturan ke dalam direktif @media tanpa mengulang selector atau mengganggu alur stylesheet.

Mari kita lihat contoh:

.navbar {
	width: 400px;
	@media picture and (orientation: portrait) {
		width: 300px;
		height: auto;
	}
}

Sekarang mari kita lihat hasil kompilasinya:

.navbar {
	width: 400px; 
}
@media picture and (orientation: portrait) {
	.navbar {
		width: 300px;
		height: auto; 
	} 
}

Ada juga kemungkinan untuk menyarangkan query @media satu sama lain, dan setelah kompilasi mereka akan digabungkan dengan operator and:

@media div {
	.picture {
		@media (orientation: portrait) {
			width: 200px;
		}
	}
}

Inilah yang akan kita lihat setelah kompilasi:

@media div and (orientation: portrait) {
	.picture {
		width: 200px; 
	} 
}

Fitur lain dari direktif @media adalah dapat digunakan untuk meneruskan variabel, fungsi, dan operator:

$media: style;
$feature: -webkit-max-device;
$value: 3.0;
		
@media #{$media} and ($feature: $value) {
	div {
		color: red;
	}
}

Dan di file style.css kita mendapatkan kode berikut:

@media style and (-webkit-max-device: 3) {
		div {
			color: red; 
		} 
}

Jelaskan, bagaimana hasil kompilasi dari kode berikut:

.active-link {
	color: blue;
	@media content {
		font-size: 14px;
		text-decoration: underline;
	}
}

Jelaskan, bagaimana hasil kompilasi dari kode berikut:

@media p {
	#product-card {
		@media (font-family: Arial) {
			font-size: 12px;
		}
	}
	#product-card-title {
		@media (font-family: Arial) {
			font-size: 14px;
			font-weight: bold;
		}
	}
}

Jelaskan, bagaimana hasil kompilasi dari kode berikut:

$var: link;
$font: font-size;
$size: 10px;
		
@media #{$var} and ($font: $size) {
	.block {
		color: red;
	}
}