Κατά την επέκταση ενός επιλογέα με την @extendοδηγία, ο Sass δεν παίρνει το περιεχόμενο CSS από τον εκτεταμένο επιλογέα για να το τοποθετήσει στην επέκταση. Λειτουργεί το αντίστροφο. Παίρνει τον επεκτατικό επιλογέα και προσαρτά τον στον εκτεταμένο.
Λόγω του πώς λειτουργεί, καθιστά αδύνατη τη χρήση του από διαφορετικά πεδία. Για παράδειγμα, δεν μπορείτε να επεκτείνετε ένα σύμβολο κράτησης θέσης που έχει δηλωθεί σε ένα @mediaμπλοκ, ούτε μπορείτε να επεκτείνετε ένα σύμβολο κράτησης θέσης από τη ρίζα εάν βρίσκεστε σε μια @mediaοδηγία.
Σίγουρα μπορούμε να βρούμε έναν τρόπο να το χρησιμοποιήσουμε @extendόταν είναι δυνατόν, να αναμειγνύεται διαφορετικά. Πράγματι, είναι εφικτό, αλλά είναι λίγο δύσκολο, το λέω αυτό το hack mix. Ίσως θέλετε να σκεφτείτε δύο φορές πριν από την εφαρμογή παντού στο έργο σας. Ίσως θα ήταν ευκολότερη η χρήση μιξινών. Θα σας αφήσω τον κριτή αυτού.
Τύλιγμα @extend
Η ιδέα είναι πραγματικά απλή στην κατανόηση. Πρώτα ορίζουμε το mixin. Η μόνη παράμετρος είναι $extend, η οποία καθορίζει εάν η μίξη πρέπει να προσπαθήσει να επεκταθεί ή όχι να συμπεριλάβει. Προφανώς, είναι boolean (από προεπιλογή true).
Εάν $extendείναι true, επεκτείνουμε ένα σύμβολο κράτησης θέσης που ονομάζεται μετά το mixin (δυστυχώς, αυτό δεν υπολογίζεται αυτόματα). Εάν είναι false, απορρίπτουμε τον κώδικα CSS όπως θα έκανε ένας κανονικός συνδυασμός.
Από το mixin, ορίζουμε το προαναφερθέν σύμβολο κράτησης θέσης. Για να αποφευχθεί η επανάληψη του κώδικα CSS στο σύμβολο κράτησης θέσης, δεν έχουμε παρά να περιλαμβάνει την Μίχίη θέτοντας $extendσε falseέτσι ώστε να απορρίπτει τον κώδικα CSS στον πυρήνα της κράτησης θέσης του.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Παράδειγμα
Ως απλό παράδειγμα, θα χρησιμοποιήσουμε την μικροκαθάριση από τον Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Η χρήση του είναι αρκετά απλή:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Αποτέλεσμα CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Απόσπασμα κειμένου υπόληψης
Εάν θέλετε να αποθηκεύσετε το boilerplate για να το χρησιμοποιήσετε ξανά, θα χαρείτε να μάθετε ότι είναι πολύ εύκολο να δημιουργήσετε ένα απόσπασμα κειμένου Sublime για αυτό. Στο Sublime, μεταβείτε στα Εργαλεία> Νέο απόσπασμα… και επικολλήστε το παρακάτω περιεχόμενο.
Μη διστάσετε να αλλάξετε το κλειδί για να βάλετε ό, τι επιπλέει στο σκάφος σας. είναι η λέξη που πρέπει να πληκτρολογήσετε πριν πατήσετε tabγια να επεκτείνετε το απόσπασμα. Πήγα με mixtend.
mixtend source.scss