Ας πούμε ότι πρέπει να χρησιμοποιήσετε έναν συγκεκριμένο επιλογέα σε πολλά σημεία στον κώδικά σας. Δεν είναι πολύ συνηθισμένο να είμαστε σίγουροι, αλλά τα πράγματα συμβαίνουν. Ο επαναλαμβανόμενος κώδικας είναι συνήθως μια ευκαιρία για αφαίρεση. Η αφαίρεση των τιμών στο Sass είναι εύκολη, αλλά οι επιλογείς είναι ελαφρώς πιο περίπλοκοι.
Ένας τρόπος να το κάνετε είναι να δημιουργήσετε τον επιλογέα σας ως μεταβλητή. Ακολουθεί ένα παράδειγμα που είναι μια λίστα επιλογών διαχωρισμένων με κόμμα:
$selectors: " .module, body.alternate .module ";Στη συνέχεια, για να το χρησιμοποιήσετε, πρέπει να παρεμβάλετε τη μεταβλητή, ως εξής:
#($selectors) ( background: red; )Αυτό λειτουργεί και με ένθεση:
.nested ( #($selectors) ( background: red; ) )Πρόθεμα
Μια μεταβλητή μπορεί επίσης να είναι μόνο ένα μέρος ενός επιλογέα, όπως ένα πρόθεμα.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Θα μπορούσατε επίσης να χρησιμοποιήσετε την ένθεση για να κάνετε πρόθεμα:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Επιλογείς σε χάρτη
Ίσως η αφαίρεσή σας προσφέρεται για μια κατάσταση ζεύγους κλειδιών / τιμών. Αυτός είναι ένας χάρτης στο Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Μπορείτε να τα χρησιμοποιήσετε ξεχωριστά όπως:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Ή βρόχος μέσω αυτών:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Παραδείγματα
Δείτε το Pen Sass Variables for Selectors του Chris Coyier (@chriscoyier) στο CodePen.