Δεν υπάρχει εύκολος τρόπος να επιλέγετε έναν επιλογέα από το σχετικό σύνολο κανόνων του. Με την καταλληλότητα εννοώ την προετοιμασία ενός ονόματος στοιχείου (π.χ. a) σε μια τάξη (π.χ. .btn) έτσι ώστε ένα σύνολο κανόνων να εξειδικεύεται για έναν συνδυασμό επιλογέα στοιχείων και επιλογέα τάξης (π.χ. a.btn) για παράδειγμα.
Από σήμερα, ο καλύτερος (και μέχρι τώρα μόνο έγκυρος τρόπος) να το κάνετε είναι ο εξής:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Ουάου, σίγουρα όχι πραγματικά κομψό, έτσι; Στην ιδανική περίπτωση, ίσως θελήσετε να κρύψετε αυτό το είδος φρικτής σύνταξης πίσω από μια μίξη, ώστε να διατηρείτε ένα καθαρό και φιλικό API, ειδικά αν έχετε προγραμματιστές νεοσύλλεκτων στην ομάδα σας.
Αυτό φυσικά είναι εξαιρετικά απλό:
/// Since the current way to qualify a class from within its ruleset is quite /// ugly, here is a mixin providing a friendly API to do so. /// @author Hugo Giraudel /// @param (String) $element-selector - Element selector @mixin qualify($element-selector) ( @at-root #($element-selector + &) ( @content; ) )Τώρα, επανεγγραφή του προηγούμενου αποσπάσματος:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Πολύ καλύτερα, σωστά; Ακόμα, qualifyμπορεί να ακούγεται λίγο δύσκολο για άπειρους Sink tinkerers. Θα μπορούσατε να δώσετε ένα ψευδώνυμο όταν ένα πιο περιγραφικό όνομα, όπως when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Ένα τελευταίο παράδειγμα:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )