Ambito delle variabili e blocchi di contenuto in SASS

Quando si passano blocchi di contenuto in un mixin, il loro ambito è determinato dalla posizione specifica del blocco, non dal mixin. Pertanto, non possiamo utilizzare le variabili locali del mixin nel blocco di contenuto passato, che potrà funzionare solo con variabili globali.

Consideriamo il seguente esempio:

$size: 14px;
	@mixin sizes ($size: 20px) {
		font-size: $size;
		padding: $size;
		@content;
}

.navbar {
	@include sizes {
		margin: $size;
	}
}

Risultato della compilazione:

.navbar {
	font-size: 20px;
	padding: 20px;
	margin: 14px; 
}

Descrivete quale sarà il risultato della compilazione del seguente codice:

$color: yellow;

@mixin links ($color: red) {
	background: $color;
	@content;
}

Descrivete quale sarà il risultato della compilazione del seguente codice:

$color: yellow;
$size: 10px;

@mixin links ($color: red, $size: 12px) {
	background-color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		box-shadow: $color;
		padding: $size;
	}
}

Descrivete quale sarà il risultato della compilazione del seguente codice:

$color: green;
$size: 6px;

@mixin links ($color: red, $size: 10px) {
	color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		border-color: $color;
		margin: $size;
	}
}

#active{
	@include links{
		background-color: $color;
		padding-top: $size;
		padding-bottom: $size * 2;
	}
}