SASS'ta Değişkenler ve İçerik Bloklarının Kapsamı

İçerik blokları mixin'lere aktarılırken, kapsamları mixin'in değil, bloğun konumuna göre belirlenir. Bu nedenle, mixin'in yerel değişkenlerini, yalnızca global değişkenlerle çalışabilen aktarılan içerik bloğunda kullanamayız.

Aşağıdaki örneği inceleyelim:

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

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

Derleme sonucu:

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

Aşağıdaki kodun derleme sonucu ne olur?

$color: yellow;

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

Aşağıdaki kodun derleme sonucu ne olur?

$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ğıdaki kodun derleme sonucu ne olur?

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