La directive @media dans SASS

Dans SASS, la directive @media s'applique de la même manière que la règle correspondante en CSS. Et on peut également la imbriquer directement dans toutes les règles CSS. Il convient de noter que dans le cas où nous imbriquons la directive @media dans une règle CSS, après la compilation elle est remontée en haut des feuilles de style, et les sélecteurs dans lesquels la directive était placée sont déplacés à l'intérieur de @media. Partant de là, on peut ajouter des règles dans la directive @media sans répéter les sélecteurs ni perturber le flux de la feuille de style.

Prenons un exemple :

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

Regardons maintenant le résultat de la compilation :

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

Il est également possible d'imbriquer des requêtes @media les unes dans les autres, et après la compilation elles sont jointes par l'opérateur and :

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

Voici ce que nous obtiendrons après la compilation :

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

Une autre particularité de la directive @media est qu'elle permet de transmettre des variables, fonctions et opérateurs :

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

Et dans le fichier style.css nous obtenons le code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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