Το Sass μπορεί κάπως να είναι λίγο μαύρο κουτί, ειδικά για νέους προγραμματιστές: βάζεις κάποια πράγματα, βγάζεις κάποια πράγματα. Πάρτε &για παράδειγμα την αναφορά επιλογής ( ), είναι λίγο τρομακτικό.
Τούτου λεχθέντος, δεν χρειάζεται να είναι έτσι. Μπορούμε να κάνουμε τη σύνταξη πιο φιλική με τίποτα περισσότερο από δύο πολύ απλούς συνδυασμούς.
Εκδηλώσεις
Όταν γράφετε Sass, συχνά βρίσκεστε να γράφετε πράγματα όπως αυτό:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Αρκετά κουραστικό και όχι απαραίτητα εύκολο στην ανάγνωση. Θα μπορούσαμε να δημιουργήσουμε λίγο mixin για να το κάνουμε απλούστερο.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Ξαναγράφοντας το προηγούμενο παράδειγμά μας:
.my-element ( color: red; @include on-event ( color: blue; ) )Πολύ καλύτερα, έτσι δεν είναι;
Τώρα, εάν θέλουμε να συμπεριλάβουμε τον ίδιο τον επιλογέα, μπορούμε να ορίσουμε την $selfπαράμετρο σε true. Για παράδειγμα:
.my-element ( @include on-event($self: true) ( color: blue; ) )Αυτό το απόσπασμα SCSS θα αποδώσει:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Πλαίσια
Σύμφωνα με τις ίδιες γραμμές, δεν είναι ασυνήθιστο να διαμορφώσετε ένα στοιχείο ανάλογα με τον γονέα που έχει. Για παράδειγμα, κάτι σαν αυτό:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Ας κάνουμε τη σύνταξη λίγο πιο φιλική και πάλι με ένα απλό mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Ξαναγράφοντας το προηγούμενο παράδειγμά μας:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )