SASSдаги ўзгарувчилар ва контент блокларининг кўриш доираси

Контент блокларини миксинга ўтказганда, уларнинг кўриш доираси блокнинг аник жойлашиши билан аникланади, миксинники билан эмас. Шу sababli, биз ўтказаётган контент блоки ичида миксиннинг локал ўзгарувчиларидан фойдалана олмаймиз, унглобал ўзгарувчилар билангина ишлаяди.

Куйидаги мисолни кўриб чикайлик:

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

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

Компиляция натижаси:

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

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

$color: yellow;

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

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

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

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

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