SASS-də dəyişənlərin və kontent bloklarının görünmə sahəsi

Kontent bloklarını miksinə ötürərkən onların görünmə sahəsi miksin yerləşdiyi yerdən deyil, konkret blokun yerləşdiyi yerdən müəyyən edilir. Nəticədə, biz ötürülən kontent blokunda yalnız qlobal dəyişənlərlə işləyə bilən miksin lokal dəyişənlərindən istifadə edə bilmərik.

Aşağıdakı nümunəyə baxaq:

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

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

Kompilyasiya nəticəsi:

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

Aşağıdakı kodun kompilyasiya nəticəsi necə olacağını izah edin:

$color: yellow;

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

Aşağıdakı kodun kompilyasiya nəticəsi necə olacağını izah edin:

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

Aşağıdakı kodun kompilyasiya nəticəsi necə olacağını izah edin:

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