ცვლადების და კონტენტის ბლოკების ხილვადობის არე 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;
	}
}