Muuttujien ja sisältölohkojen näkyvyysalue SASS:ssa

Kun sisältölohkoja välitetään mixiniin, niiden näkyvyysalue määräytyy lohkon konkreettisen sijainnin perusteella, eikä mixinin perusteella. Siksi emme voi käyttää mixinin paikallisia muuttujia välitetyissä sisältölohkoissa, jotka voivat toimia vain globaalien muuttujien kanssa.

Tarkastellaan seuraavaa esimerkkiä:

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

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

Kokoamisen tulos:

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

Kerro, mikä on seuraavan koodin kokoamisen tulos:

$color: yellow;

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

Kerro, mikä on seuraavan koodin kokoamisen tulos:

$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;
	}
}

Kerro, mikä on seuraavan koodin kokoamisen tulos:

$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;
	}
}