10 απίστευτες προσθήκες PostCSS για να σας κάνει έναν οδηγό CSS

Το PostCSS είναι ένα απίστευτα ευπροσάρμοστο εργαλείο που σας επιτρέπει να το κάνετε μετατρέψτε τα στυλ CSS με plugins JavaScript. Η ευελιξία της έγκειται στον τρόπο με τον οποίο είναι χτισμένο.

Το κεντρικό τμήμα του PostCSS είναι μια ενότητα Node.js που μπορείτε να εγκαταστήσετε με npm και έχει ένα οικοσύστημα με περισσότερα από 200 plugins που μπορείτε να επιλέξετε να χρησιμοποιήσετε στο έργο σας.

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

Το PostCSS παίρνει το υπάρχον αρχείο CSS και το μετατρέπει σε δεδομένα που μπορούν να διαβαστούν με JavaScript, τότε τα plugins JavaScript εκτελούν τις τροποποιήσεις και το PostCSS επιστρέφει την αλλοιωμένη έκδοση του αρχικού αρχείου. Ακούγεται δροσερό, δεν το κάνει?

Σε αυτή την ανάρτηση θα δούμε τα 10 plug-ins του PostCSS σας δίνουν μια εικόνα για μερικά από τα σπουδαία πράγματα που μπορείτε να επιτύχετε με αυτό το φοβερό εργαλείο.

1. Autoprefixer

Autoprefixer είναι ίσως το πιο γνωστό plugin PostCss, καθώς χρησιμοποιείται από σημαντικές εταιρείες τεχνολογίας όπως το Google, το Twitter και το Shopify. Το προσθέτει τα προθέματα των πωλητών στους κανόνες CSS όπου είναι απαραίτητο.

Το Autoprefixer χρησιμοποιεί δεδομένα από το Μπορώ να χρησιμοποιήσω. Με αυτόν τον τρόπο δεν έχει ημερομηνία και μπορεί πάντα να εφαρμόζει τους πιο πρόσφατους κανόνες. Μπορείτε να δείτε πώς λειτουργεί στο διαδραστικό του demo site.

2. CSSnext

CSSnext είναι ένα CSS transpiler που σας επιτρέπει να χρησιμοποιήσετε τη μελλοντική σύνταξη CSS σε τρέχοντες ιστότοπους. Το W3C έχει πολλούς νέους κανόνες CSS που δεν εφαρμόζονται επί του παρόντος από προγράμματα περιήγησης, αλλά θα μπορούσε να επιτρέψει στους προγραμματιστές να γράψουν πιο εξελιγμένα CSS γρηγορότερα και ευκολότερα. Έχει γίνει CSSnext για να γεφυρωθεί αυτό το χάσμα.

Αξίζει να ρίξετε μια ματιά στα χαρακτηριστικά του για να δείτε τι μπορείτε να πετύχετε με αυτό, για παράδειγμα μπορείτε χρησιμοποιήστε προσαρμοσμένα ερωτήματα μέσων, προσαρμοσμένους επιλογείς, τροποποιητές χρώματος, φίλτρα SVG και νέους ψευδοκλάσους στα σχέδιά σας.

3. PreCSS

PreCSS είναι ένα από τα plug-ins PstCSS που λειτουργούν σαν προεπεξεργαστές CSS. Το καθιστά δυνατό επωφεληθείτε από μια σήμανση τύπου Sass στα αρχεία sytiesheet.

Με την εισαγωγή του PreCSS στη ροή εργασίας σας μπορείτε να χρησιμοποιήσετε μεταβλητές, αν-αλλιώς δηλώσεις, Για βρόχους, αναμικτήρες, @επεκτείνω και @εισαγωγή κανόνες, φωλιές και πολλά άλλα χρήσιμα χαρακτηριστικά στον κώδικα CSS. Η τεκμηρίωση Github της PreCSS σάς παρέχει λεπτομερείς οδηγίες σχετικά με τον τρόπο αξιοποίησης του μέγιστου δυνατού.

4. StyleLint

StyleLint είναι μια σύγχρονη CSS linter που διορθώνει και επικυρώνει τον κωδικό σας CSS. Καθιστά εύκολη την αποφυγή σφαλμάτων και σας ωθεί να ακολουθήσετε συνεπείς συμβάσεις κωδικοποίησης.

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

5. Περιουσιακά στοιχεία του PostCSS

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

Θα πρέπει να ορίσετε διαδρομές φόρτωσης, σχετικές διαδρομές και μια διαδρομή βάσης και το plugin θα αναζητήσει αυτόματα τα στοιχεία που χρειάζεστε. Για παράδειγμα, μπορείτε να γράψετε τον παρακάτω κώδικα εάν χρειάζεστε τη σωστή διεύθυνση URL του foobar.jpg εικόνα:

 σώμα φόντο: επίλυση ('foobar.jpg'); 

Τα στοιχεία ενεργητικού PostCSS επίσης φροντίζει για την προσωρινή μνήμη του ενεργητικού, όπως μπορείτε να ρυθμίσετε το cachebuster μεταβλητή σε αληθής εάν θέλετε οι διαδρομές URL να αλλάζουν αυτόματα σε περίπτωση τροποποίησης ενός στοιχείου. Αυτό το έξυπνο πρόσθετο επίσης υπολογίζει τις διαστάσεις (πλάτος και ύψος) των αρχείων εικ νας ή ακόμα και τους αλλάζει μέγεθος χρησιμοποιώντας μια προκαθορισμένη αναλογία.

6. CSSNano

Εάν χρειάζεστε βελτιστοποιημένα και μικροσκοπικά αρχεία CSS για έναν ιστότοπο παραγωγής, αξίζει να το ελέγξετε CSSNano. Πρόκειται για ένα αρθρωτό πρόσθετο που αποτελείται από πολλά μικρότερα plug-ins PostCSS με ενιαία ευθύνη. Δεν εκτελεί μόνο βασικές τεχνικές εξομάλυνσης, όπως η αφαίρεση των κενών χώρων, αλλά διαθέτει και προχωρημένες επιλογές που καθιστούν εφικτές βελτιστοποιήσεις εστιασμένες.

Μεταξύ πολλών άλλων δυνατοτήτων, το CSSNano είναι ικανό να μετατρέψει τις τιμές του δείκτη z, να μειώσει τα προσαρμοσμένα αναγνωριστικά, να μετατρέψει τις τιμές μήκους, ώρας και χρώματος και να καταργήσει παλιά πρότυπα πωλητών.

7. Μάγος γραμματοσειράς

Εάν είστε λάτρης της εκλεπτυσμένης τυπογραφίας, σίγουρα θα σας αρέσει Μαγεία γραμματοσειράς PostCSS plugin. Η μαγεία του Μαγισσού γραμματοσειράς βασίζεται στην ικανότητά του δημιουργώντας αυτόματα όλα τα απαραίτητα @ font-face κανόνες.

Πώς λειτουργεί είναι αρκετά απλή, πρέπει μόνο να προσθέσετε το γραμματοσειρά-οικογένεια: "Η γραμματοσειρά μου Fav"; CSS κανόνα σε ένα στοιχείο HTML, και το Font Magician κάνει το υπόλοιπο έργο. Μπορεί να προσθέσει τις γραμματοσειρές Google, το τοπικό αντίγραφο γραμματοσειράς, την τυπογραφία Bootstrap και επίσης να φορτώσει ασύγχρονες γραμματοσειρές. Εδώ είναι το διαδραστικό demo site της.

8. Γράψτε SVG

Έχετε αναρωτηθεί ποτέ πόσο δροσερό θα ήταν να γράψετε SVG απευθείας στα αρχεία CSS; Με τη βοήθεια του plugin Write SVG PostCSS μπορείτε εύκολα να επιτύχετε αυτόν τον στόχο.

Αυτό το εύχρηστο plugin, για παράδειγμα, το καθιστά δυνατό αποθηκεύστε τα φόντα και τα εικονίδια SVG στο αρχείο CSS, και αργότερα προσθέστε τις στο σχετικό στοιχείο HTML με τον ακόλουθο τρόπο:

 @svg τετράγωνο @ ακριβό fill: var (- χρώμα, μαύρο); πλάτος: 100%. ύψος: 100%. . παράδειγμα φόντο: λευκό svg (τετράγωνο param (- χρώμα # 00b1ff)) κάλυμμα? 

9. Lost Grid

Lost Grid είναι ένα υπέροχο plugin PostCSS που σας προσφέρει ένα εντυπωσιακό CSS σύστημα πλέγματος αυτό όχι μόνο λειτουργεί με απλό CSS αλλά και με γλώσσες προεπεξεργαστή (Sass, LESS, Stylus). Χρησιμοποιεί το calc () CSS λειτουργία για να δημιουργήσετε όμορφα πλέγματα που μπορείτε εύκολα να χρησιμοποιήσετε χωρίς να ξοδεύετε πολύ χρόνο με την προσαρμογή.

Το Lost Grid έχει πολύ απλούς κανόνες, για παράδειγμα ο καθορισμός στήλης με πλάτος 25% δεν χρειάζεται περισσότερο από αυτό το μικρό απόσπασμα κώδικα:

 div χαμένη στήλη: 1/4; 

10. PostCSS Sprites

ο PostCSS Sprite plug-in καθιστά εύκολο να Δημιουργία σπρέι εικόνων, δηλ. συλλογές εικόνων τοποθετημένων σε ένα μόνο αρχείο. Αφού ορίσετε μερικές επιλογές, το πρόσθετο παίρνει τις εικόνες από το αρχείο φύλλου στυλ, τις συγχωνεύει σε ένα sprite και στη συνέχεια ενημερώνει τις αναφορές εικόνων οπουδήποτε είναι απαραίτητο.

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