Directive @media in SASS

In SASS, the @media directive is used in the same way as the corresponding rule in CSS. And it can also be nested directly in all CSS rules. It should be noted that when we nest the @media directive in a CSS rule, after compilation it rises above the stylesheets, and the selectors in which the directive was placed are moved inside @media. Based on this, we can add rules to the @media directive without repeating selectors or breaking the flow of the stylesheet.

Let's look at an example:

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

Now let's look at the compilation result:

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

It is also possible to nest @media queries inside each other, and after compilation they are joined by the and operator:

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

This is what we will see after compilation:

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

Another feature of the @media directive is that it can be used to pass variables, functions, and operators:

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

And in the style.css file we get the following code:

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

Tell me what the result of compiling the following code will be:

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

Tell me what the result of compiling the following code will be:

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

Tell me what the result of compiling the following code will be:

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