Μετάβαση από CSS σε Sass στο WordPress

Αυτό το άρθρο εμφανίστηκε αρχικά στο τεύχος 265 του περιοδικού net

Κάθε καλός προγραμματιστής ξέρει να αναζητά τρόπους για να μειώσει την επαναλαμβανόμενη εργασία και να αφήσει τον υπολογιστή του να χειρίζεται κοσμικές, ανόητες εργασίες. Οι προεπεξεργαστές CSS όπως το Sass μας προσφέρουν πολλά πολύτιμα εργαλεία για να βοηθήσουν στην αυτοματοποίηση της διαδικασίας κωδικοποίησης του frontend. Για παράδειγμα, με το Sass μπορούμε να χρησιμοποιήσουμε μεταβλητές. Έτσι, αντί να εκτελούμε μια εντολή «εύρεση και αντικατάσταση» μέσω ενός μεγάλου αρχείου CSS για να τροποποιήσουμε μια τιμή χρώματος, μπορούμε απλά να αλλάξουμε τον ορισμό της μεταβλητής.

Το Sass μας επιτρέπει επίσης να γράφουμε συναρτήσεις για τη δημιουργία μπλοκ κώδικα επαναλαμβανόμενου στυλ. Για παράδειγμα, μια συνάρτηση κουμπιού θα μπορούσε να δεχθεί το χρώμα ή το στυλ ως παράμετρο και να δημιουργήσει όλο το τυπικό CSS για τη διεπαφή χρήστη ενός κουμπιού: ακτίνα περιγράμματος, διαβαθμίσεις, χρώματα κειμένου και ούτω καθεξής. Μπορούμε επίσης να χωρίσουμε τα γιγάντια φύλλα στυλ μας σε οργανωμένες ενότητες. Σχεδόν κάθε εφαρμογή CMS, προσθήκη και web χρησιμοποιεί καταλόγους και επιμέρους στοιχεία για τη βελτίωση της δυνατότητας συντήρησης του κώδικα: Το Sass μας επιτρέπει να το κάνουμε αυτό με το CSS μας.

Οι τεχνικές που εξηγούνται σε αυτό το σεμινάριο είναι συγκεκριμένες για το Sass που χρησιμοποιεί το Σύνταξη SCSS, αλλά ισχύουν για τους περισσότερους άλλους προεπεξεργαστές – όπως Πιο λιγο ή Κονδύλι - επισης.

Μετατροπή φύλλων στυλ θέματος

Εάν το θέμα WordPress που χρησιμοποιείτε περιλαμβάνει ήδη αρχεία Sass, η διαδικασία μετατροπής των υπαρχόντων φύλλων στυλ θέματος σε Sass έχει ολοκληρωθεί για εσάς. Συνήθως ξεκινώ νέα θέματα με το πρότυπο Underscores από το Automattic (underscores.me). Όταν δημιουργείτε ένα νέο πακέτο θεμάτων από τον ιστότοπό του, θα βρείτε ένα '_sassify!' επιλογή εάν κάνετε κλικ στο σύνδεσμο «Σύνθετες επιλογές». Αυτό θα σας παρέχει την προεπιλεγμένη βιβλιοθήκη Sass της Automattic όταν κάνετε λήψη του κενού θέματος.

Ωστόσο, εάν το θέμα που δημιουργείτε ή τροποποιείτε δεν περιλαμβάνει αρχεία Sass, θα ξεκινήσετε μετατρέποντας το υπάρχον αρχείο CSS σε Sass. Αυτό το βήμα αποκαλύπτει ένα σημαντικό πλεονέκτημα στη χρήση Sass (SCSS): ο μεταγλωττιστής Sass διαβάζει απλό CSS χωρίς κανένα πρόβλημα. Το μόνο που χρειάζεται να κάνετε για να χρησιμοποιήσετε το αρχικό style.css ως Sass είναι να το αντιγράψετε και να το μετονομάσετε style.scss.

Ρύθμιση μερικών Sass

Νωρίτερα ανέφερα ότι το Sass βελτιώνει τη ροή εργασίας μας αφήνοντάς μας να σπάσουμε χιλιάδες γραμμές CSS σε αρθρωτά αρχεία που ονομάζονται μερικώς. Ας επεξεργαστούμε αυτό το βήμα πριν φτάσουμε στις μεθόδους μεταγλωττιστή.

Εάν έχετε μετατρέψει ένα υπάρχον αρχείο CSS σε Sass, το μόνο που έχετε μέχρι στιγμής είναι ένα αρχείο .scss που είναι εξίσου δυσκίνητο με το αρχείο CSS από το οποίο προήλθε. Σε αυτό το σημείο, μπορείτε να αρχίσετε να χρησιμοποιείτε μεταβλητές και να γράφετε μίξεις ή συναρτήσεις, αλλά το Sass δεν είναι ακόμα αρθρωτό ή οργανωμένο. Θέλετε να ομαδοποιήσετε το αρχείο CSS σε ενότητες που εξυπηρετούν μεμονωμένους σκοπούς. Ο στόχος είναι να μπορείτε να βρείτε πού βρίσκεται ο κώδικας με βάση το όνομα του αρχείου του.

Ορισμένες ενότητες κώδικα που πιθανώς θα θέλετε να απομονώσετε περιλαμβάνουν πλοήγηση, τυπογραφικά στυλ, πλαϊνή γραμμή widgets, υποσέλιδο και ένα σύστημα πλέγματος (αν και αυτή η λίστα δεν είναι περιεκτική σε καμία περίπτωση, είναι απλώς μια αρχή σημείο).

Στη συνέχεια, θα κόψετε και θα επικολλήσετε κάθε αρθρωτό τμήμα του CSS στο δικό του μερικό Sass. Το όνομα αρχείου ενός μερικού Sass ξεκινά πάντα με μια κάτω παύλα (_). Αυτό λέει στους μεταγλωττιστές να μην δημιουργούν ένα μοναδικό αρχείο CSS με βάση αυτό το αρχείο Sass.

Μια εφαρμογή μεταγλωττιστή που παρακολουθεί έναν φάκελο γεμάτο Sass και δημιουργεί αυτόματα CSS θα δημιουργήσει style.css με βάση το style.scss, αλλά δεν θα δημιουργήσει navigation.css με βάση το _navigation.scss. Για να μεταγλωττίσετε όλα τα επιμέρους στοιχεία που μόλις δημιουργήσατε, θα τα εισαγάγετε @ στο κύριο αρχείο Sass.

Κάθε φορά που αντιγράφετε ένα μπλοκ κώδικα σε ένα μερικό, αντικαταστήστε το στο κύριο αρχείο .scss με το @import 'partial-name';. Εάν μετακινήσετε τα στυλ υποσέλιδου στο _footer.scss, προσθέστε το @import 'footer';. Μην συμπεριλάβετε το _ ή το .scss στην εισαγωγή: μόνο το όνομα του αρχείου.

Εάν θέλετε να οργανωθείτε πραγματικά και να χωρίσετε την πλοήγηση της κεφαλίδας και την πλοήγηση στο υποσέλιδο σε δύο ξεχωριστά τμήματα σε έναν φάκελο /navigation/, συμπεριλάβετε το όνομα του φακέλου στην εισαγωγή:

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss. @import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

Είναι σημαντικό να θυμάστε ότι ο καταρράκτης CSS εξακολουθεί να ισχύει για κώδικα γραμμένο σε Sass. Τα στυλ γραμμένα με τμηματικά που εισήχθησαν αργότερα έχουν τη δυνατότητα να παρακάμπτουν τα στυλ σε τμηματικά που εισήχθησαν νωρίτερα.

Είναι επίσης συνετό να εισάγετε επιμέρους στοιχεία που περιέχουν τις μίξεις και τις μεταβλητές σας στην αρχή του πρωτεύοντος αρχείου Sass, έτσι ώστε αργότερα να μπορούν να χρησιμοποιούν αυτές τις μεταβλητές και τις μίξεις.

Σύμφωνα με τις απαιτήσεις του WordPress style.css, πρέπει να βεβαιωθούμε ότι ο μεταγλωττιστής μας διατηρεί τα σχόλια του WordPress στην κορυφή του style.css. Όταν το output_style του Sass έχει οριστεί σε :compressed, αφαιρεί όλα τα σχόλια όταν μεταγλωττίζει το CSS.

Για να διασφαλίσετε ότι αυτά τα σχόλια παραμένουν ανέπαφα, προσθέστε ένα θαυμαστικό (!) στην αρχή του μπλοκ σχολίων στο style.scss:

/*! Theme Name: Sassy WordPress Theme. Theme URI: http://jamessteinbach.com/sass/
Author: James Steinbach. Author URI: http://jamessteinbach.com. Description: From CSS to Sass Sample Theme Code. */
// Import all your .scss partials below

Refactor CSS σε Sass

Τώρα που χωρίσαμε ένα μεγάλο φύλλο στυλ σε μικρότερα αρθρωτά τμήματα, μπορούμε να αρχίσουμε να αναδιαμορφώνουμε το αρχικό CSS ώστε να ταιριάζει στις προτιμήσεις μας Sass. Μερικά χρήσιμα εργαλεία Sass για την αναδιαμόρφωση κώδικα είναι οι μεταβλητές, η ένθεση, οι συναρτήσεις και οι μίξεις.

Εάν θέλετε να αλλάξετε ορισμένα χρώματα ή να ορίσετε μια τυπική κλίμακα τύπου, οι μεταβλητές είναι ο καλύτερος τρόπος για να αποθηκεύσετε όλα αυτά τα δεδομένα σε ένα μόνο μέρος και να κάνετε εύκολα αλλαγές σε ολόκληρο τον ιστότοπο. Εάν δεν έχετε ήδη δημιουργήσει ένα μερικό που ονομάζεται _variables.scss, προτείνω να το κάνετε τώρα – και να το εισαγάγετε στην κορυφή του κύριου αρχείου Sass. Ακολουθούν ορισμένες μεταβλητές που μπορεί να θέλετε να βάλετε σε αυτό το μερικό:

$red: #FF4136; $blue: #0074D9; $blue-dark: #001F3F; $orange: #FF851B. $type-small: 12px; $type-medium: 16px; $type-large: 21px; $type-hero: 44px;

Αφού ρυθμίσετε αυτές τις μεταβλητές, μπορείτε να αναζητήσετε τα επιμέρους στοιχεία σας και να αντικαταστήσετε τις τιμές με ονόματα μεταβλητών:

body { color: $blue-dark; }
.page-title { font-size: $type-large; }

Μπορείτε να χρησιμοποιήσετε μια λειτουργία Sass που ονομάζεται "ένθεση" για να κάνετε τους σύνθετους επιλογείς πιο ευανάγνωστους. Το αρχικό σας CSS μπορεί να περιλαμβάνει στυλ για πολλά στοιχεία στην πλαϊνή γραμμή του ιστότοπου:

.sidebar h1 { //styles. }
.sidebar p { //styles. }
.sidebar ul { //styles. }

Μπορείτε να τοποθετήσετε στυλ μέσα σε άλλα μπλοκ στυλ και το Sass θα συνδυάσει επιλογείς για να δημιουργήσει τους σύνθετους επιλογείς. Ο παρακάτω κώδικας θα μεταγλωττιστεί στην ίδια έξοδο με το αρχικό CSS (όπως φαίνεται στον παραπάνω κώδικα).

.sidebar { h1 { //styles } p { //styles } ul { //styles }
}

In nesting & μπορεί να χρησιμοποιηθεί ως σύμβολο κράτησης θέσης για ολόκληρη τη σειρά επιλογέων πάνω από αυτό. Καθώς η ένθεση βάζει ένα κενό μεταξύ των επιλογέων, μπορεί να είναι χρήσιμο όταν χρησιμοποιείτε ψευδοκλάσεις και ψευδοστοιχεία:

a { color: $blue; &:hover { color: $blue-dark; }
}
.clearfix { &::before, &::after { content: ""; display: table; clear: both; }
}

Το & μπορεί επίσης να χρησιμοποιηθεί για την αντιγραφή ή την αντιστροφή της σειράς των επιλογέων:

p { & + & { margin-top: 1em; }
}
.menu-link { color: $gray; .menu-item: hover & { color: $gray-light; }
}

Ίσως αναρωτιέστε αν αξίζει τον κόπο σας για να αναπαραστήσετε τις ιδιότητες ένθεσης. Ενώ η ένθεση μπορεί να αυξήσει την αναγνωσιμότητα (αν και αυτό είναι υποκειμενικό), είναι επίσης ένα εργαλείο που πρέπει να χρησιμοποιείται προσεκτικά. Οι περισσότεροι ειδικοί του Sass προτείνουν έναν «κανόνα έναρξης» για την ένθεση Sass: μην τοποθετείτε ποτέ σε βάθος περισσότερο από τρία επίπεδα. Είναι σοφό να χρησιμοποιείτε με φειδώ το Sass. Εάν δεν έχει νόημα στη ροή εργασίας σας, μην το πιέζετε.

Εάν υπολογίζετε επανειλημμένα ορισμένες ιδιότητες στο CSS σας, μπορείτε να αντικαταστήσετε αυτήν τη διαδικασία με μια συνάρτηση Sass. Μια συνάρτηση παίρνει τις παραμέτρους που της δίνετε και επιστρέφει μια τιμή. Δεν θα δημιουργήσει ζεύγη ιδιοτήτων-τιμών CSS, αλλά μπορεί να δημιουργήσει τιμές για εσάς.

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

// This goes in _functions.scss: @function hover-color($color) { @return lighten($color, 10%); }
// This is how you use the function in other partials: .button { background-color: $red; &:hover { background-color: hover-color($red); }
}

Μπορούμε επίσης να αναδιαμορφώσουμε τον κώδικά μας λαμβάνοντας επαναλαμβανόμενα μπλοκ κώδικα και αντικαθιστώντας τα με mixins. Ένα εξαιρετικό παράδειγμα χρήσιμου mixin είναι ένα clearfix.

// This goes in _mixins.scss: @mixin clearfix() { &::after { content: “”; display: table; clear: both; }
}
// This is how you use the mixin in other partials: .content-container { @include clearfix; }

Τα Mixins μπορούν επίσης να λάβουν παραμέτρους για να δημιουργήσουν προσαρμοσμένη έξοδο. Αυτό είναι πολύ χρήσιμο για μοτίβα σχεδίασης όπως κουμπιά ή ειδοποιήσεις:

// This goes in _mixins.scss: @mixin alert($color) { border-radius: .5em; box-shadow: 0 0 .25em 0 rgba(0,0,0,.5); border-top: 4px solid $color; color: $color; }
// This is how you use this mixin: .alert-error { @include alert($red); }
.alert-success { @include alert($green); }

Μια κοινή συμβουλή που μπορεί να δείτε στο διαδίκτυο είναι να χρησιμοποιείτε mixins για πρόθεμα μεταξύ προγραμμάτων περιήγησης. Συνήθως προτείνω να μην το κάνετε αυτό, ωστόσο. Το βρίσκω αυτό Αυτόματο πρόθεμα είναι ένας πολύ καλύτερος τρόπος για να αυτοματοποιήσετε τα προθέματα.

Εάν δεν μπορείτε να εκτελέσετε το Autoprefixer και πρέπει να βασιστείτε σε μίξεις Sass, Βιβλιοθήκη mixin της Compass επιτρέπει τη διαμόρφωση του χρήστη και παραμένει ενημερωμένος με Μπορώ να χρησιμοποιήσω δεδομένα.

Οργανώστε τα μερικά σας

Για να ανακεφαλαιώσουμε, διαχωρίσαμε το υπάρχον φύλλο στυλ του θέματος και δημιουργήσαμε εκ νέου κάποιο κώδικα για να κάνουμε τα πράγματα πιο καθαρά και πιο καθαρά. Τώρα μπορούμε να οργανώσουμε τα εξαρτήματά μας για να βελτιώσουμε τη συντηρησιμότητα μακροπρόθεσμα.

Θυμηθείτε ότι ο καταρράκτης εξακολουθεί να έχει σημασία. Το CSS που έχει μεταγλωττιστεί με Sass είναι ακριβώς όπως το απλό CSS, καθώς τα στυλ που εμφανίζονται αργότερα στο φύλλο στυλ μπορούν να αντικαταστήσουν τα στυλ που εμφανίζονται νωρίτερα. Κατά κανόνα, εισάγετε τα γενικά στυλ σας πριν εισαγάγετε συγκεκριμένα στυλ.

Παρόμοια τμήματα μπορούν να οργανωθούν σε φακέλους. Υπάρχουν δύο τρόποι εισαγωγής τμημάτων Sass από καταλόγους. Το πρώτο είναι να εισαγάγετε κάθε αρχείο στο style.scss συμπεριλαμβανομένου του ονόματος φακέλου στην οδηγία εισαγωγής, ως εξής:

@import 'base/variables'; // imports _variables.scss from the /base/ directory. @import 'base/mixins'; // imports mixins.scss from the /base/ directory. @import 'base/grid'; // imports _grid.scss from the /base/ directory

Η δεύτερη (και ομολογουμένως πιο περίπλοκη) μέθοδος είναι η δημιουργία ενός μέρους κράτησης θέσης σε κάθε κατάλογο που εισάγει τα άλλα τμήματα σε αυτόν τον κατάλογο (επόμενη στήλη):

// in style.scss. @import 'base/base'; // in /base/_base.scss. @import 'variables'; // imports _variables.scss from the /base/ directory. @import 'mixins'; // imports mixins.scss from the /base/ directory. @import 'grid'; // imports _grid.scss from the /base/ directory

Και οι δύο αυτές μέθοδοι εισάγουν τα ίδια τμήματα με την ίδια σειρά. Η πρώτη μέθοδος είναι απλούστερη επιφανειακά, αλλά η δεύτερη μέθοδος έχει το πλεονέκτημα ότι διατηρεί το style.scss τακτοποιημένο και μεταφέρει οποιαδήποτε πολυπλοκότητα στις μονάδες στις οποίες βασίζεται.

Υπάρχουν σχεδόν τόσοι τρόποι οργάνωσης τμημάτων Sass όσοι προγραμματιστές που προσπαθούν να οργανώσουν τμηματικά Sass. Θα βρείτε πολλές καλές επιλογές στο πλαίσιο «Πόροι» στη σελίδα 88.

Εδώ είναι ένα αρκετά απλό οργανωτικό σχήμα που θα μπορούσατε να χρησιμοποιήσετε:

• /base/ (μεταβλητές, mixins, επαναφορά, τυπογραφία)
• /διάταξη/ (πλέγμα, κεφαλίδα, υποσέλιδο)
• /vendors/ (πρόσθετα, προμηθευτές, κ.λπ.)
• /components/ (κουμπιά, μενού, φόρμες, γραφικά στοιχεία)
• /pages/ (αρχική σελίδα, σελίδα προορισμού, χαρτοφυλάκιο)

Ανακεφαλαίωση

Αυτό το άρθρο αρχίζει μόνο να διερευνά τις δυνατότητες χρήσης του Sass στην ανάπτυξη θεμάτων WordPress. Οι πιθανότητες είναι μεγάλες να είστε πρόθυμοι για περισσότερες πληροφορίες τώρα, ειδικά αν αυτό είναι το πρώτο πράγμα που έχετε διαβάσει για το θέμα.

Ρίξτε μια ματιά στο πλαίσιο «Πόροι» για περισσότερες πληροφορίες σχετικά με το θέμα – αυτά τα άρθρα περιλαμβάνουν διάφορες παραλλαγές σε μια ροή εργασίας Sass-WordPress. Μερικές από τις συμβουλές τους διαφέρουν από ό, τι έχω προτείνει (ειδικά για το θέμα της οργάνωσης τμημάτων), αλλά δεν πειράζει – βρείτε τις τεχνικές και τις ροές εργασίας που σας εξυπηρετούν!

Ο James Steinbach δημιούργησε ένα αποκλειστικό screencast για να ακολουθήσετε αυτό το σεμινάριο, το οποίο μπορείτε να παρακολουθήσετε παρακάτω.

Λόγια:Τζέιμς Στάινμπαχ