Lingkup Variabel dan Blok Konten di SASS

Saat meneruskan blok konten ke dalam mixin, lingkupnya ditentukan oleh lokasi spesifik dari blok tersebut, bukan oleh mixinnya. Oleh karena itu, kita tidak dapat menggunakan variabel lokal mixin dalam blok konten yang diteruskan, yang hanya dapat bekerja dengan variabel global.

Pertimbangkan contoh berikut:

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

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

Hasil kompilasi:

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

Jelaskan, apa hasil kompilasi dari kode berikut:

$color: yellow;

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

Jelaskan, apa hasil kompilasi dari kode 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;
	}
}

Jelaskan, apa hasil kompilasi dari kode 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;
	}
}