Μεταβλητές στις παραμέτρους στο SASS

Υπάρχουν περιπτώσεις όπου ένα mixin ή μια function πρέπει να δεχτούν άγνωστο αριθμό παραμέτρων. Για αυτό στη γλώσσα SASS υπάρχει η δυνατότητα μετάδοσης "μεταβλητών παραμέτρων" ή παραμέτρων, που ορίζονται τελευταίες στη function ή στο mixin και συσκευάζουν όλες τις υπόλοιπες παραδιδόμενες παραμέτρους σε μια λίστα.

Μετά από τέτοιες παραμέτρους πρέπει να βάζουμε αποσιωπητικά. Ας εξετάσουμε το ακόλουθο παράδειγμα:

styles.scss@mixin box-content-padding($padding...) {
  -moz-box-content-padding: $padding;
  -webkit-box-content-padding: $padding;
}
div {
  @include box-content-padding(0px 4px 5px 2px);
}

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

styles.cssdiv {
  -moz-box-content-padding: 0px 4px 5px 2px;
  -webkit-box-content-padding: 0px 4px 5px 2px;
}

Σε μεταβλητές function ή mixin επίσης μπορούν να μεταδοθούν ονομασμένες παράμετροι. Για να μπορέσουμε να τις προσπελάσουμε χρησιμοποιούν τη function keywords($args), που επιστρέφει αυτές ως μια αντιστοίχιση ονομάτων (χωρίς το σύμβολο $) με τιμές.

styles.scss@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...);
}

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

styles.css.primary {
  color: white;
  background-color: green;
  box-shadow: grey;
}

.secondary {
  color: black;
  background-color: grey;
  box-shadow: green;
}