Skop Pembolehubah dan Blok Kandungan dalam SASS

Apabila blok kandungan dihantar kepada mixin, skopnya ditentukan oleh kedudukan khusus blok tersebut, bukan mixin. Oleh itu, kita tidak boleh menggunakan pembolehubah tempatan mixin dalam blok kandungan yang dihantar, yang hanya boleh berfungsi dengan pembolehubah global.

Pertimbangkan contoh berikut:

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

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

Hasil pengkompilasian:

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

Terangkan apakah hasil pengkompilasian kod berikut:

$color: yellow;

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

Terangkan apakah hasil pengkompilasian kod berikut:

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

Terangkan apakah hasil pengkompilasian kod berikut:

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