Περιοχή ορατότητας μεταβλητών και μπλοκ περιεχομένου στο SASS

Κατά τη μετάδοση μπλοκ περιεχομένου σε ένα mixin, η περιοχή ορατότητάς τους καθορίζεται από τη συγκεκριμένη θέση του μπλοκ, και όχι από το mixin. Συνεπώς, δεν μπορούμε να χρησιμοποιήσουμε τις τοπικές μεταβλητές του mixin στο μεταδιδόμενο μπλοκ περιεχομένου, το οποίο θα μπορεί να λειτουργήσει μόνο με καθολικές μεταβλητές.

Ας εξετάσουμε το ακόλουθο παράδειγμα:

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