Доираи намоиши тағирёбандаҳо ва блокҳои мундариҷа дар SASS

Ҳангоми интиқоли блокҳои мундариҷа ба миксин, доираи намоиши онҳо ба мавқеи мушаххаси блок, на миксин муайян карда мешавад. Аз ин рӯ, мо наметавонем истифода барем тағирёбандаҳои маҳаллии миксинро дар блоки мундариҷаи интиқолшаванда, ки танҳо метавонад кор кунад бо тағирёбандаҳои глобалӣ.

Мисоли зеринро дида мебароем:

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