Παράμετροι Mixins στο SASS

Ένα σημαντικό χαρακτηριστικό των mixins στο SASS είναι ότι δέχονται μεταβλητές ως παραμέτρους, οι οποίες καταγράφονται μέσα σε παρενθέσεις και, εάν υπάρχουν πολλές μεταβλητές, χωρίζονται με κόμματα.

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

@mixin active($color, $width) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow, 2px);
}

Αποτέλεσμα μεταγλώττισης:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dashed;
}

Εκτός από αυτό, στα mixins μπορούν να μεταβιβαστούν προεπιλεγμένες τιμές παραμέτρων:

@mixin active($color,  $width: 2px) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow);
}
div {
	@include active(yellow, 4px);
}

Μετά τη μεταγλώττιση θα δούμε:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dotted;
}
div {
	border-color: yellow;
	border-width: 4px;
	border-style: dotted;
}

Πείτε μας, ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

@mixin simple-border($padding-top, $padding-bottom) {
	border: {
		padding-top: $padding-top;
		padding-bottom: $padding-bottom;
		color: green;
	}
}
p {
	@include simple-border(10px, 30px );
}

Πείτε μας, ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

@mixin simple-border($padding-top, $padding-bottom: 20px) {
	border: {
	padding-top: $padding-top;
	padding-bottom: $padding-bottom;
	color: green;
	}
}
p {
	@include simple-border(10px);
}