Μεταβλητές στις παραμέτρους στο SASS
Υπάρχουν περιπτώσεις όπου ένα mixin ή μια function πρέπει να δεχτούν άγνωστο αριθμό παραμέτρων. Για αυτό στη γλώσσα SASS υπάρχει η δυνατότητα μετάδοσης "μεταβλητών παραμέτρων" ή παραμέτρων, που ορίζονται τελευταίες στη function ή στο mixin και συσκευάζουν όλες τις υπόλοιπες παραδιδόμενες παραμέτρους σε μια λίστα.
Μετά από τέτοιες παραμέτρους πρέπει να βάζουμε αποσιωπητικά. Ας εξετάσουμε το ακόλουθο παράδειγμα:
@mixin box-content-padding($padding...) {
-moz-box-content-padding: $padding;
-webkit-box-content-padding: $padding;
}
div {
@include box-content-padding(0px 4px 5px 2px);
}
Αποτέλεσμα μεταγλώττισης:
div {
-moz-box-content-padding: 0px 4px 5px 2px;
-webkit-box-content-padding: 0px 4px 5px 2px;
}
Σε μεταβλητές function ή mixin επίσης
μπορούν να μεταδοθούν ονομασμένες παράμετροι.
Για να μπορέσουμε να τις προσπελάσουμε
χρησιμοποιούν τη function keywords($args),
που επιστρέφει αυτές ως μια αντιστοίχιση
ονομάτων (χωρίς το σύμβολο $) με τιμές.
@mixin common-colors($text-color, $background, $shadow) {
color: $text-color;
background-color: $background;
box-shadow: $shadow;
}
$values: white, green, grey;
.primary {
@include common-colors($values...);
}
$value-map: (text-color: black, background: grey, shadow: green);
.secondary {
@include common-colors($value-map...);
}
Μετά τη μεταγλώττιση θα δούμε:
.primary {
color: white;
background-color: green;
box-shadow: grey;
}
.secondary {
color: black;
background-color: grey;
box-shadow: green;
}