Προεπεξεργαστής CSS: επισκόπηση, επιλογή, εφαρμογή. Γιατί ξεκινήσαμε να χρησιμοποιούμε τον προεπεξεργαστή Stylus στο Yandex.Mail, καθώς και σχετικά με τη βιβλιοθήκη που σας βοηθά να ζείτε με τον IE

Εάν ανήκετε στη σκηνή του Front-End, μπορεί να έχετε ακούσει για το Stylus, έναν μακρινό ξάδελφο της γλώσσας προεπεξεργαστή Sass που κανείς δεν γνωρίζει πραγματικά. Όπως και το Sass, το Slylus είναι ένας προεπεξεργαστής CSS γραμμένος στο Node.js. Σύμφωνα με την υπηρεσία ιστού GitHub, ορίζεται ως:

[…] μια επαναστατική νέα γλώσσα που παρέχει έναν αποτελεσματικό, δυναμικό και εκφραστικό τρόπο γραφής CSS.

Λοιπόν, ας πούμε ότι η χρήση της λέξης «επαναστάτης» είναι λίγο υπερβολική εδώ. Όλα τα άλλα όμως είναι αλήθεια. "Τι; Άλλο;» ρωτάς. «Κάτι», θα απαντήσω. Αλλά το Stylus δεν είναι καθόλου νέα γλώσσα. Ξεκίνησε την ύπαρξή του γύρω στις αρχές του 2011, αλλά, όπως παρατήρησα, οι απόψεις για αυτό ποικίλλουν αρκετά. Παρεμπιπτόντως, ξέρατε ότι οι τελευταίες αλλαγές στο Δίκτυο προγραμματιστών Mozilla έγιναν χρησιμοποιώντας τη γραφίδα; Ο David Walsh, ο οποίος εργάστηκε στο έργο, έγραψε επίσης για το πώς να ξεκινήσετε με το Stylus.

Ποια είναι λοιπόν τα πλεονεκτήματα του Stylus έναντι του Sass; Πρώτον, έχει αναπτυχθεί με βάση το Node.sj, το οποίο είναι ένα πλεονέκτημα για μένα προσωπικά. Αν και είναι υπέροχο που μπορείτε να χρησιμοποιήσετε το Sass σε μια ροή εργασίας Node χάρη στο περιτύλιγμα Sass για το LibSass, δεν μπορούμε να πούμε το ίδιο για το LibSass που είναι γραμμένο στο Node.

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

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

Λοιπόν, τι νομίζεις; Θέλω να προσπαθήσω;

Αρχίζουν

Όπως αναφέρθηκε προηγουμένως, το Slylus είναι γραμμένο στο Node.js ώστε να μπορούμε να το εγκαταστήσουμε όπως οποιοδήποτε άλλο πακέτο npm:

$ npm εγκατάσταση γραφίδας -g

Από εκεί, μπορείτε να το συνδέσετε σε έναν Node Worker χρησιμοποιώντας το JavaScript API ή μπορείτε να χρησιμοποιήσετε τη γραμμή εντολών που είναι εκτελέσιμο για να συνθέσετε φύλλα στυλ. Για λόγους απλότητας, θα χρησιμοποιήσουμε το εργαλείο γραμμής εντολών Stylus, αλλά μη διστάσετε να δανειστείτε ένα από το σενάριο Node, Gulp ή Grunt

γραφίδα ./stylesheets/ --out ./public/css

Η προηγούμενη εντολή λέει στο Stylus να συλλέξει όλα τα στυλ Stylus (.styl) από το φάκελο stylesheets και να τα συλλέξει στο φάκελο public/css. Φυσικά, μπορείτε επίσης να δείτε τον κατάλογο εάν θέλετε να κάνετε αλλαγές:

γραφίδα --watch ./stylesheets/ --out ./public/css

Στυλ γραφής σε γραφίδα

Εάν μόλις ξεκινάτε και δεν θέλετε να κατακλύσετε τον εαυτό σας με νέα σύνταξη, να ξέρετε ότι μπορείτε να γράψετε απλό CSS σε ένα αρχείο .styl. Εφόσον το Stylus υποστηρίζει τυπική σύνταξη CSS, μπορείτε να ξεκινήσετε με κώδικα CSS, μόνο για να τον ενισχύσετε λίγο.

Βασική σύνταξη

Όσο για την ίδια τη σύνταξη, σχεδόν όλα είναι προαιρετικά. Σγουρά τιράντες: γιατί να ασχοληθείτε; Πάλες: έλα! Κόμματα: ναι, ποιος τα χρειάζεται! Παρένθεση: παρακαλώ. Παρακάτω είναι ο απόλυτα σωστός κωδικός Stylus:

Foo .bar χρώμα ντομάτα φόντο βαθύ μπλε

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

Foo, .bar ( χρώμα: ντομάτα; φόντο: βαθύ μπλε; )

Μεταβλητές

Η πιο συχνά χρησιμοποιούμενη συνάρτηση από προεπεξεργαστές CSS θα πρέπει να μπορεί να ορίζει μεταβλητές. Δεν αποτελεί έκπληξη το γεγονός ότι η Slylus προσφέρει και αυτό. Αν και σε αντίθεση με το Sass, εκφράζονται με σύμβολο ίσον (=) και όχι άνω και κάτω τελεία (:). Επιπλέον, το σύμβολο του δολαρίου ($) είναι προαιρετικό και μπορεί να παραλειφθεί με ασφάλεια.

//Ορισμός της μεταβλητής `text-font-stack` text-font-stack = "Helvetica", "Arial", sans-serif; // Χρησιμοποιήστε το ως μέρος της ιδιότητας "font" γραμματοσειρά 125% / 1.5 text-font-stack

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

Όταν χρησιμοποιούμε το @width, λέμε στο Stylus να πάρει την τιμή του πλάτους

ιδιότητες του τρέχοντος μπλοκ, αντιμετωπίζοντάς το ως μεταβλητή. Αρκετά απλό! Μια άλλη ενδιαφέρουσα περίπτωση χρήσης είναι η έξοδος μιας ιδιότητας ανάλογα με το αν είχε οριστεί προηγουμένως:

Foo // ... άλλα στυλ z-index: 1 εκτός εάν @z-index

Σε αυτήν την περίπτωση, ο δείκτης z θα έχει τιμή 1, εκτός εάν το .foo είχε ήδη το σύνολο ιδιοτήτων z-index. Σε συνδυασμό με mixins, αυτή θα είναι μια δυνατή κίνηση.

Μείγματα

Εδώ που τα λέμε, ας ορίσουμε τι είναι mixin, αφού είναι ίσως ένα από τα πιο δημοφιλή χαρακτηριστικά Sass! Ένα mixin στο Stylus δεν χρειάζεται συγκεκριμένη λέξη-κλειδί. είναι mixin αν έχει παρενθέσεις (κενή ή όχι) στο τέλος του ονόματος του.

Μέγεθος (πλάτος, ύψος = πλάτος) πλάτος πλάτος ύψος ύψος

Όπως και στην πρώτη περίπτωση, για να συμπεριλάβετε ένα mixin, δεν χρειάζεστε ειδική σύνταξη, όπως @include ή +:

Μέγεθος Foo (100px)

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

Μέγεθος Foo 100 px

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

Υπερχείλιση(τιμή) αν τιμή == έλλειψη λευκού διαστήματος nowrap υπερχείλιση κρυφό κείμενο-υπερχείλιση έλλειψη άλλη υπερχείλιση: τιμή

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

Έλειψη υπερχείλισης Foo

Και αυτό θα δώσει:

Foo (κενό διάστημα: nowrap; υπερχείλιση: κρυφό; κείμενο-υπερχείλιση: έλλειψη; )

Πρέπει να παραδεχτείτε, αυτό είναι ένα πολύ ωραίο κόλπο. Αν και μπορεί να προκαλέσει σύγχυση (και ενδεχομένως επικίνδυνο). Η δυνατότητα επέκτασης τυπικών ιδιοτήτων CSS με πρόσθετες τιμές είναι στην πραγματικότητα μια ενδιαφέρουσα ιδέα.

Εάν θέλετε να περάσετε κάποιο περιεχόμενο σε ένα mixin, στυλ @content, είναι δυνατό μέσω μιας μεταβλητής (μπλοκ). Κατά τη συμπερίληψη, χρειάζεται μόνο να προσθέσετε το πρόθεμα του ονόματος mixin με ένα + για να του δώσετε επιπλέον περιεχόμενο.

Has-js() html.js & (block).foo +has-js() χρώμα κόκκινο

Αυτός ο κώδικας μεταγλωττίστηκε σε:

Html.js .foo (χρώμα: #f00; )

Ένα τελευταίο και πολύ ενδιαφέρον χαρακτηριστικό των μεικτών Stylus είναι ότι έχουν πάντα μια μεταβλητή τοπικών ορισμάτων που περιέχει όλα τα ορίσματα (αν υπάρχουν) που μεταβιβάζονται στο mixin όταν περιλαμβάνονται εκεί. Αυτή η μεταβλητή μπορεί να χειριστεί και να αντιμετωπιστεί σαν πίνακας, για παράδειγμα για την ανάκτηση της τιμής σε συγκεκριμένα ευρετήρια χρησιμοποιώντας το συνδυασμό [..] όπως στο JavaScript.

Και εν κατακλείδι…

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

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

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

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

Η CSS είναι μια σκόπιμα απλή γλώσσα. Με τον πολλαπλασιασμό πολύπλοκων διαδικτυακών εφαρμογών, την εμφάνιση θέσεων προγραμματιστών στο front-end και τον αυξανόμενο αριθμό νέων απαιτήσεων, αυτή η απλότητα εξατμίζεται γρήγορα. Για τους μη μυημένους, οι προεπεξεργαστές CSS (ιδιαίτερα τα Sass, LESS και Stylus) επεκτείνουν τις δυνατότητες στυλ σας με πρόσθετες λειτουργίες όπως μεταβλητές, ένθεση και μίξεις, δίνοντάς σας πολύ περισσότερο έλεγχο σε μεγάλο αριθμό στυλ.

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

Εισαγωγή (προαιρετικό)

Όπως σημειώθηκε στην εισαγωγή, πράγματα όπως το Sass, το LESS και το Stylus μας παρέχουν πρόσθετη λειτουργικότητα πάνω από το CSS, αλλά τα αρχεία που είναι γραμμένα σε αυτές τις γλώσσες πρέπει να μεταγλωττίζονται σε CSS πριν το πρόγραμμα περιήγησης επιχειρήσει να αναλύσει οτιδήποτε σε αυτά. Γενικά, η διαδικασία μεταγλώττισης είναι αυτοματοποιημένη με τέτοιο τρόπο ώστε να ελαχιστοποιεί τυχόν επιπτώσεις στη ροή εργασίας.

Χρησιμοποιώντας οποιονδήποτε από τους αναφερόμενους προεπεξεργαστές, μπορείτε να επωφεληθείτε από τα ακόλουθα:

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

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

Πρόσθετα: για την επέκταση του τυπικού οπλοστασίου, χρησιμοποιούνται ευρέως διάφορα πρόσθετα. Το Sass έχει Compass, το Stylus έχει Nib και ενώ είναι μια διαφορετική ιστορία, το Bootstrap, που δεν χρειάζεται εισαγωγή, είναι κατασκευασμένο με LESS.

Πραγματικά οφέλη

Στην πραγματικότητα, το κύριο πλεονέκτημα των προεπεξεργαστών έγκειται στη λιγότερη προσπάθεια - όχι σωματική (πατήστε τα πλήκτρα λιγότερο συχνά), αλλά διανοητική. Οι προεπεξεργαστές σάς δίνουν μια αποτελεσματική ευκαιρία να αφαιρέσετε μέρος του κουραστικού φορτίου στο μυαλό σας και να κάνετε λιγότερη εναλλαγή μεταξύ διαφορετικών εφαρμογών, κάτι που είναι χαρακτηριστικό στην ανάπτυξη front-end. Έχετε μια συχνά χρησιμοποιούμενη έννοια χρώματος; Αποθηκεύστε το σε μια μεταβλητή αντί να το κυνηγήσετε γύρω από το έργο ή να το αποθηκεύσετε στη μνήμη σας. Χρειάζεστε μια προβλέψιμη και απλή αλλαγή χρώματος; Το SASS έχει ένα σύνολο λειτουργιών χρώματος που δεν κάνουν τίποτα άλλο παρά εξαλείφουν την ανάγκη να φτάσετε στον πλησιέστερο επιλογέα χρώματος.

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

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

Ανώδυνη σύνθεση

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

Ακριβώς στο πρόγραμμα περιήγησης

Δεν είστε σίγουροι; Ρίξτε μια ματιά σε αυτές τις υλοποιήσεις του προγράμματος περιήγησης των προεπεξεργαστών.

Απολύτως όλοι οι έμπειροι σχεδιαστές διάταξης χρησιμοποιούν προεπεξεργαστές. Δεν υπάρχουν εξαιρέσεις. Αν θέλετε να πετύχετε σε αυτή τη δραστηριότητα, μην ξεχάσετε αυτά τα προγράμματα. Με την πρώτη ματιά, μπορούν να προκαλέσουν ήσυχο τρόμο σε έναν αρχάριο - αυτό είναι πολύ παρόμοιο με τον προγραμματισμό! Στην πραγματικότητα, μπορείτε να κατανοήσετε όλες τις δυνατότητες των προεπεξεργαστών CSS σε περίπου μία ημέρα, και αν προσπαθήσετε, τότε σε μερικές ώρες. Θα κάνουν τη ζωή σας πολύ πιο εύκολη στο μέλλον.

Πώς δημιουργήθηκαν οι προεπεξεργαστές CSS

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

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

Το 1994, ο Νορβηγός επιστήμονας Haakon Lie ανέπτυξε ένα φύλλο στυλ που θα μπορούσε να χρησιμοποιηθεί για το στυλ της εμφάνισης μιας σελίδας ξεχωριστά από το έγγραφο HTML. Η ιδέα τράβηξε την προσοχή των εκπροσώπων της κοινοπραξίας W3C, οι οποίοι άρχισαν αμέσως να την τελειοποιούν. Λίγα χρόνια αργότερα, κυκλοφόρησε η πρώτη έκδοση της προδιαγραφής CSS. Στη συνέχεια βελτιωνόταν και βελτιωνόταν συνεχώς... Αλλά η ιδέα παρέμεινε η ίδια: σε κάθε στυλ δίνονται ορισμένες ιδιότητες.

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

Και μετά ήρθαν τα δύο χιλιάρικα. Οι επαγγελματίες προγραμματιστές front-end άρχισαν όλο και περισσότερο να ασχολούνται με τη σήμανση, για τους οποίους η ευέλικτη και δυναμική εργασία με στυλ ήταν σημαντική. Το CSS που υπήρχε εκείνη την εποχή απαιτούσε υποστήριξη προθέματος και παρακολούθησης για νέες δυνατότητες του προγράμματος περιήγησης. Στη συνέχεια, οι ειδικοί της JavaScript και της Ruby ασχολήθηκαν, δημιουργώντας προεπεξεργαστές - πρόσθετα για CSS που προσθέτουν νέες δυνατότητες σε αυτό.

CSS για αρχάριους: Χαρακτηριστικά των προεπεξεργαστών

Εκτελούν διάφορες λειτουργίες:

• Ενοποιήστε τα προθέματα και τις εισβολές του προγράμματος περιήγησης.

• απλοποίηση της σύνταξης.

• καθιστούν δυνατή την εργασία με ένθετους επιλογείς χωρίς σφάλματα.

• βελτιώστε τη λογική του στυλ.

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

Βλέποντας τη δημοτικότητα τέτοιων πρόσθετων, το W3C άρχισε σταδιακά να προσθέτει χαρακτηριστικά από αυτά στον κώδικα CSS. Για παράδειγμα, έτσι εμφανίστηκε η συνάρτηση calc() στην προδιαγραφή, η οποία υποστηρίζεται από πολλά προγράμματα περιήγησης. Αναμένεται ότι σύντομα θα είναι δυνατή η ρύθμιση μεταβλητών και η δημιουργία μίξεων. Ωστόσο, αυτό θα συμβεί στο μακρινό μέλλον και οι προεπεξεργαστές είναι ήδη εδώ και ήδη λειτουργούν τέλεια.

Δημοφιλείς προεπεξεργαστές CSS. Sass

Αναπτύχθηκε το 2007. Αρχικά ήταν ένα στοιχείο του Haml, μιας μηχανής προτύπων HTML. Οι νέες δυνατότητες διαχείρισης στοιχείων CSS απήχθησαν στους προγραμματιστές του Ruby on Rails, οι οποίοι άρχισαν να το διανέμουν παντού. Η Sass εισήγαγε έναν τεράστιο αριθμό χαρακτηριστικών που περιλαμβάνονται πλέον σε οποιονδήποτε προεπεξεργαστή: μεταβλητές, ένθεση επιλογέων, mixins (εκείνη την εποχή, ωστόσο, δεν μπορούσατε να προσθέσετε ορίσματα σε αυτά).

Δήλωση μεταβλητών σε Sass

Οι μεταβλητές δηλώνονται χρησιμοποιώντας το σύμβολο $. Μπορείτε να αποθηκεύσετε τις ιδιότητες και τα σύνολά τους σε αυτές, για παράδειγμα: "$borderSolid: 1px συμπαγές κόκκινο;". Σε αυτό το παράδειγμα, δηλώσαμε μια μεταβλητή που ονομάζεται borderSolid και αποθηκεύσαμε την τιμή 1px σταθερό κόκκινο σε αυτήν. Τώρα, εάν στο CSS χρειάζεται να δημιουργήσουμε ένα κόκκινο περίγραμμα πλάτους 1 px, απλώς καθορίζουμε αυτήν τη μεταβλητή μετά το όνομα της ιδιότητας. Αφού δηλωθούν, οι μεταβλητές δεν μπορούν να αλλάξουν. Διατίθενται πολλές ενσωματωμένες λειτουργίες. Για παράδειγμα, ας δηλώσουμε μια μεταβλητή $redColor με την τιμή #FF5050. Τώρα στον κώδικα CSS, στις ιδιότητες κάποιου στοιχείου, τον χρησιμοποιούμε για να ορίσουμε το χρώμα της γραμματοσειράς: p ( χρώμα: $redColor; ). Θέλετε να πειραματιστείτε με το χρώμα; Χρησιμοποιήστε τις λειτουργίες σκούρου ή φωτισμού. Αυτό γίνεται ως εξής: p ( χρώμα: darken($redColor, 20%); ). Ως αποτέλεσμα, το κόκκινο χρώμα θα γίνει 20% πιο ανοιχτό.

Φωλιάζοντας

Προηγουμένως, ήταν απαραίτητο να χρησιμοποιηθούν μακριές και άβολες κατασκευές για να υποδείξουν τη φωλιά. Ας φανταστούμε ότι έχουμε ένα div που περιέχει p και αυτό με τη σειρά του περιέχει ένα span. Για το div πρέπει να ορίσουμε το χρώμα της γραμματοσειράς σε κόκκινο, για p - κίτρινο, για span - ροζ. Στο κανονικό CSS αυτό θα γινόταν ως εξής:

Με τη βοήθεια ενός προεπεξεργαστή CSS, όλα γίνονται πιο απλά και πιο συμπαγή:

Τα στοιχεία είναι κυριολεκτικά «φωλιασμένα» το ένα στο άλλο.

Οδηγίες προεπεξεργαστή

Μπορείτε να εισάγετε αρχεία χρησιμοποιώντας την οδηγία @import. Για παράδειγμα, έχουμε ένα αρχείο fonts.sass, το οποίο δηλώνει στυλ για γραμματοσειρές. Το συμπεριλαμβάνουμε στο κύριο αρχείο style.sass: @import ‘fonts’. Ετοιμος! Αντί για ένα μεγάλο αρχείο στυλ, έχουμε πολλά που μπορούν να χρησιμοποιηθούν για γρήγορη και εύκολη πρόσβαση στις ιδιότητες που χρειαζόμαστε.

Παιχνίδια

Μια από τις πιο ενδιαφέρουσες ιδέες. Επιτρέπει τη ρύθμιση ενός ολόκληρου συνόλου ιδιοτήτων σε μία γραμμή. Λειτουργούν ως εξής:

@mixin largeFont (

font-family: 'Times New Roman';

μέγεθος γραμματοσειράς: 64 px;

Ύψος γραμμής: 80 px;

βάρος γραμματοσειράς: έντονη γραφή;

Για να εφαρμόσετε ένα mixin σε ένα στοιχείο της σελίδας, χρησιμοποιήστε την οδηγία @include. Για παράδειγμα, θέλουμε να το εφαρμόσουμε στην κεφαλίδα h1. Το αποτέλεσμα είναι η ακόλουθη κατασκευή: h1 ( @include: largeFont; )

Όλες οι ιδιότητες από το mixin θα εκχωρηθούν στο στοιχείο h1.

Προεπεξεργαστής Λιγότερο

Η σύνταξη Sass θυμίζει προγραμματισμό. Αν ψάχνετε για μια επιλογή που είναι πιο κατάλληλη για αρχάριους μαθητές CSS, ρίξτε μια ματιά στο Less. Δημιουργήθηκε το 2009. Το κύριο χαρακτηριστικό είναι η εγγενής υποστήριξη, επομένως θα είναι ευκολότερο για τους σχεδιαστές διάταξης που δεν είναι εξοικειωμένοι με τον προγραμματισμό να τον κατακτήσουν.

Οι μεταβλητές δηλώνονται χρησιμοποιώντας το σύμβολο @. Για παράδειγμα: @fontSize: 14px;. Το Nesting λειτουργεί με τις ίδιες αρχές όπως στο Sass. Οι μίξεις δηλώνονται ως εξής: .largeFont() ( γραμματοσειρά-οικογένεια: 'Times New Roman', μέγεθος γραμματοσειράς: 64 εικονοστοιχεία, ύψος γραμμής: 80 εικονοστοιχεία, βάρος γραμματοσειράς: έντονη γραφή; ). Για να συνδεθείτε, δεν χρειάζεται να χρησιμοποιήσετε οδηγίες προεπεξεργαστή - απλώς προσθέστε ένα νέο mixin στις ιδιότητες του επιλεγμένου στοιχείου. Για παράδειγμα: h1 ( .largeFont; ).

Κονδύλι

Ένας άλλος προεπεξεργαστής. Δημιουργήθηκε το 2011 από τον ίδιο συγγραφέα που χάρισε στον κόσμο Jade, Express και άλλα χρήσιμα προϊόντα.

Οι μεταβλητές μπορούν να δηλωθούν με δύο τρόπους - ρητά ή σιωπηρά. Για παράδειγμα: γραμματοσειρά = 'Times New Roman'; - αυτή είναι μια σιωπηρή επιλογή. Αλλά $font = «Times New Roman» είναι ρητό. Τα μείγματα δηλώνονται και περιλαμβάνονται σιωπηρά. Η σύνταξη είναι: redColor() χρώμα κόκκινο. Τώρα μπορούμε να το προσθέσουμε στο στοιχείο, για παράδειγμα: h1 redColor();.

Με την πρώτη ματιά, το Stylus μπορεί να φαίνεται μπερδεμένο. Πού είναι οι «εγγενείς» παρενθέσεις και ερωτηματικά; Αλλά μόλις το βουτήξετε, όλα γίνονται πολύ πιο ξεκάθαρα. Ωστόσο, έχετε κατά νου ότι η μακροπρόθεσμη ανάπτυξη με αυτόν τον προεπεξεργαστή μπορεί να σας αποτρέψει από τη χρήση της κλασικής σύνταξης CSS. Αυτό μερικές φορές προκαλεί προβλήματα όταν χρειάζεται να εργαστείτε με «καθαρά» στυλ.

Ποιον προεπεξεργαστή να επιλέξω;

Πραγματικά... δεν πειράζει. Όλες οι επιλογές παρέχουν περίπου τις ίδιες δυνατότητες, απλώς η σύνταξη είναι διαφορετική για το καθένα. Συνιστούμε να κάνετε τα εξής:

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

Για όλες τις επιλογές, είναι διαθέσιμος ένας τεράστιος αριθμός ενδιαφέρουσες βιβλιοθήκες που μπορούν να απλοποιήσουν περαιτέρω την ανάπτυξη. Συνιστάται στους χρήστες του Sass να ελέγξουν το Compass, ένα ισχυρό εργαλείο με πολλές ενσωματωμένες δυνατότητες. Για παράδειγμα, μετά την εγκατάστασή του, δεν θα χρειαστεί ποτέ να ανησυχείτε για τα προθέματα προμηθευτή. Διευκολύνει την εργασία με πλέγματα. Υπάρχουν βοηθητικά προγράμματα για την εργασία με χρώματα και sprites. Ένας αριθμός ήδη ανακοινωθέντων μίξεων είναι διαθέσιμος. Αφιερώστε μερικές ημέρες σε αυτό το προϊόν - έτσι θα εξοικονομήσετε πολύ κόπο και χρόνο στο μέλλον.

Η αξιοποίηση της πραγματικής δύναμης του προεπεξεργαστή CSS είναι μια περιπέτεια. Υπάρχουν αμέτρητες γλώσσες, συντάξεις και λειτουργίες, όλα έτοιμα προς χρήση αυτήν τη στιγμή.

Σε αυτό το άρθρο, θα εξετάσουμε τις διάφορες δυνατότητες και τα πλεονεκτήματα της χρήσης τριών διαφορετικών προεπεξεργαστών: Sass, LESS και Stylus.

Εισαγωγή Οι προεπεξεργαστές δημιουργούν CSS που λειτουργεί σε όλα τα προγράμματα περιήγησης.

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

Σύνταξη

Το πιο σημαντικό μέρος της γραφής κώδικα σε έναν προεπεξεργαστή CSS είναι η κατανόηση της σύνταξης. Ευτυχώς για εμάς, η σύνταξη είναι (ή μπορεί να είναι) ίδια με την κανονική CSS και για τους τρεις προεπεξεργαστές.

SASS&LESS

Το Sass και το LESS χρησιμοποιούν τυπική σύνταξη CSS. Αυτό καθιστά εύκολη τη μετατροπή ενός υπάρχοντος αρχείου CSS σε προεπεξεργαστή. Το Sass χρησιμοποιεί την επέκταση .scss και το LESS χρησιμοποιεί την επέκταση .less. Ένα βασικό αρχείο Sass ή LESS μπορεί να ρυθμιστεί ως εξής:

/* style.scss ή style.less */
h1 (
χρώμα: #0982C1;
}

Όπως ίσως έχετε παρατηρήσει, αυτό είναι απλώς απλό CSS που μεταγλωττίζεται άψογα τόσο στο Sass όσο και στο LESS.

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

/* style.sass */
h1
χρώμα: #0982c1

Κονδύλι

Η σύνταξη για το Stylus είναι πολύ πιο αναλυτική. Χρησιμοποιώντας την επέκταση αρχείου .styl, το Stylus αποδέχεται την τυπική σύνταξη CSS, αλλά δέχεται και κάποιες άλλες παραλλαγές στις οποίες οι παρενθέσεις, οι άνω τελείες και τα ερωτηματικά είναι προαιρετικά. Για παράδειγμα:

/* style.styl */
h1 (
χρώμα: #0982C1;
}
/* παράλειψη παρενθέσεων */
h1
χρώμα: #0982C1;
/* παραλείψτε άνω και κάτω τελεία και ερωτηματικά */
h1
χρώμα #0982C1

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

H1 (
χρώμα #0982c1
}
h2
μέγεθος γραμματοσειράς: 1,2 εκ

Μεταβλητές

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

Sass

Οι μεταβλητές Sass προστίθενται με χαρακτήρα $ και η τιμή και το όνομα διαχωρίζονται με ερωτηματικό, ακριβώς όπως μια ιδιότητα CSS.

$mainColor: #0982c1;
$siteWidth: 1024 px;
$borderStyle: διάστικτη;
σώμα (
χρώμα: $mainColor;
περίγραμμα: 1 εικονοστοιχείο $borderStyle $mainColor;
max-width: $siteWidth;
}

ΠΙΟ ΛΙΓΟ

Οι μεταβλητές LESS είναι ακριβώς οι ίδιες με τις μεταβλητές Sass, εκτός από το ότι τα ονόματα των μεταβλητών επισυνάπτονται με το σύμβολο @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: διάστικτη;
σώμα (
χρώμα: @mainColor;
περίγραμμα: 1px @borderStyle @mainColor;
μέγιστο πλάτος: @siteWidth;
}

Κονδύλι

Οι μεταβλητές γραφίδας δεν απαιτούν προσάρτηση για αυτές, αν και επιτρέπει τη χρήση του συμβόλου $. Όπως πάντα, το ερωτηματικό τέλος δεν απαιτείται, αλλά υπάρχει ένα σύμβολο ίσου μεταξύ της τιμής και της μεταβλητής. Θα πρέπει να σημειωθεί ότι το Stylus (0.22.4) μεταγλωττίζει εάν προσθέσουμε ένα σύμβολο @ στο όνομα της μεταβλητής, αλλά δεν εφαρμόζουμε την τιμή κατά την αναφορά. Με άλλα λόγια, μην το κάνετε.

MainColor = #0982c1
SiteWidth = 1024 px
$borderStyle = διάστικτη
σώμα
χρώμα mainColor
περίγραμμα 1 εικονοστοιχείο $borderStyle mainColor
μέγιστο πλάτος τοποθεσίας Πλάτος

Μεταγλώττιση CSS

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

Σώμα (
χρώμα: #0982c1;
περίγραμμα: 1 εικονοστοιχείο με κουκκίδες #0982c1;
μέγιστο πλάτος: 1024 px;
}

Το συνημμένο

Εάν χρειάζεται να αναφέρουμε πολλά στοιχεία με τον ίδιο γονέα στο CSS μας, μπορεί να είναι κουραστικό να συνεχίσουμε να γράφουμε το γονικό ξανά και ξανά.

Ενότητα (
περιθώριο: 10 px;
}
πλοήγηση ενότητας (
ύψος: 25 px;
}
ενότητα πλοήγηση α (
χρώμα: #0982C1;
}
ενότητα nav a:hover (
κείμενο-διακόσμηση: υπογράμμιση;
}

Αντίθετα, χρησιμοποιώντας έναν προεπεξεργαστή, μπορούμε να γράψουμε τους θυγατρικούς επιλογείς μέσα στις παρενθέσεις του γονέα. Επιπλέον, & υποδηλώνει τον επιλογέα γονέα.

Sass, LESS και Stylus

Και οι τρεις προεπεξεργαστές έχουν την ίδια σύνταξη για τους επιλογείς ένθεσης.

Ενότητα (
περιθώριο: 10 px;
nav(
ύψος: 25 px;
ένα (
χρώμα: #0982C1;
&:hover (
κείμενο-διακόσμηση: υπογράμμιση;
}
}
}
}

Μεταγλώττιση CSS

Αυτό είναι το μεταγλωττισμένο CSS από τον παραπάνω κώδικα. Είναι ακριβώς το ίδιο όπως όταν ξεκινήσαμε - πόσο βολικό!

Ενότητα (
περιθώριο: 10 px;
}
πλοήγηση ενότητας (
ύψος: 25 px;
}
ενότητα nav a (
χρώμα: #0982C1;
}
ενότητα nav a:hover (
κείμενο-διακόσμηση: υπογράμμιση;
}

Μείγματα

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

Sass /* Σφάλμα μίξης Sass με (προαιρετικό) όρισμα $borderWidth το οποίο ορίζεται από προεπιλογή σε 2 εικονοστοιχεία εάν δεν έχει καθοριστεί */
@mixin error($borderWidth: 2px) (
περίγραμμα: $borderWidth συμπαγές #F00;
χρώμα: #F00;
}
.generic-error(
padding: 20px;
περιθώριο: 4 px;
@include error(); /* Εφαρμόζει στυλ από σφάλμα mixin */
}
.login-error(
αριστερά: 12 px;
θέση: απόλυτη;
κορυφή: 20 px;
@include error(5px); /* Εφαρμόζει στυλ από σφάλμα mixin με όρισμα $borderWidth ίσο με 5 px*/
)LESS /* LESS σφάλμα μίξης με (προαιρετικό) όρισμα @borderWidth το οποίο ορίζεται από προεπιλογή σε 2 px εάν δεν έχει καθοριστεί */
.error(@borderWidth: 2px) (
περίγραμμα: @borderWidth στερεό #F00;
χρώμα: #F00;
}
.generic-error(
padding: 20px;
περιθώριο: 4 px;
.λάθος(); /* Εφαρμόζει στυλ από σφάλμα mixin */
}
.login-error(
αριστερά: 12 px;
θέση: απόλυτη;
κορυφή: 20 px;
.error(5px); /* Εφαρμόζει στυλ από σφάλμα mixin με όρισμα @borderWidth ίσο με 5 px */
)stylus /* Σφάλμα ανάμειξης γραφίδας με (προαιρετικό) όρισμα borderWidth που ορίζεται από προεπιλογή σε 2 εικονοστοιχεία εάν δεν έχει καθοριστεί */
error(borderWidth= 2px) (
περίγραμμα: borderWidth solid #F00;
χρώμα: #F00;
}
.generic-error(
padding: 20px;
περιθώριο: 4 px;
λάθος(); /* Εφαρμόζει στυλ από σφάλμα mixin */
}
.login-error(
αριστερά: 12 px;
θέση: απόλυτη;
κορυφή: 20 px;
error(5px); /* Εφαρμόζει στυλ από σφάλμα mixin με όρισμα borderWidth ίσο με 5 px */
)Μεταγλωττισμένο CSS

Όλοι οι προεπεξεργαστές συνθέτουν τον ίδιο κώδικα:

Γενικό σφάλμα (
padding: 20px;
περιθώριο: 4 px;
περίγραμμα: 2px στερεό #f00;
χρώμα: #f00;
}
.login-error(
αριστερά: 12 px;
θέση: απόλυτη;
κορυφή: 20 px;
περίγραμμα: 5px στερεό #f00;
χρώμα: #f00;
}

Κληρονομία

Όταν γράφουμε CSS με τον παλιομοδίτικο τρόπο, θα μπορούσαμε να χρησιμοποιήσουμε τον ακόλουθο κώδικα για να εφαρμόσουμε τα ίδια στυλ σε πολλά στοιχεία ταυτόχρονα:

Π,
ul,
ol (
/* στυλ εδώ */
}

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

Sass & Stylus .block (
περιθώριο: 10 px 5 px;
padding: 2px;
}
Π(
@επεκτείνω
περίγραμμα: 1px στερεό #EEE;
}
ul, ol (
χρώμα: #333;
μετατροπή κειμένου: κεφαλαία;
)Μεταγλωττισμένο CSS (Sass &Stylus) .block, p, ul, ol (
περιθώριο: 10 px 5 px;
padding: 2px;
}
Π(
περίγραμμα: 1px στερεό #EEE;
}
ul, ol (
χρώμα: #333;
μετατροπή κειμένου: κεφαλαία;
)ΠΙΟ ΛΙΓΟ

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

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ (
περιθώριο: 10 px 5 px;
padding: 2px;
}
Π(
.ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ; /* Κληρονόμηση στυλ από ".block" */
περίγραμμα: 1px στερεό #EEE;
}
ul, ol (
.ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ; /* Κληρονόμηση στυλ από ".block" */
χρώμα: #333;
μετατροπή κειμένου: κεφαλαία;
}

Μεταγλώττιση CSS (LESS).block(
περιθώριο: 10 px 5 px;
padding: 2px;
}
Π(
περιθώριο: 10 px 5 px;
padding: 2px;
περίγραμμα: 1px στερεό #EEE;
}
ul,
ol (
περιθώριο: 10 px 5 px;
padding: 2px;
χρώμα: #333;
μετατροπή κειμένου: κεφαλαία;
}

Όπως μπορείτε να δείτε, τα στυλ από το .block έχουν εισαχθεί στους επιλογείς που θα θέλαμε να κληρονομήσουν. Είναι σημαντικό να σημειωθεί ότι η προτεραιότητα μπορεί να γίνει θέμα εδώ, οπότε να είστε προσεκτικοί.

Εισαγωγή

Στην κοινότητα CSS, η εισαγωγή CSS αποδοκιμάζεται επειδή απαιτεί πολλαπλά αιτήματα HTTP. Ωστόσο, η εισαγωγή με προεπεξεργαστή λειτουργεί διαφορετικά. Εάν εισάγετε ένα αρχείο από οποιονδήποτε από τους τρεις προεπεξεργαστές, θα περιλαμβάνει κυριολεκτικά την εισαγωγή κατά τη στιγμή της μεταγλώττισης, δημιουργώντας μόνο ένα αρχείο. Λάβετε υπόψη ότι η εισαγωγή κανονικών αρχείων .css μεταγλωττίζεται με το @import "file.css" από προεπιλογή. κώδικας. Επιπλέον, οι μίξεις και οι μεταβλητές μπορούν να εισαχθούν και να χρησιμοποιηθούν στο κύριο φύλλο στυλ σας. Η εισαγωγή καθιστά πολύ χρήσιμη τη δημιουργία ξεχωριστών αρχείων για τον οργανισμό.

Αρχείο Sass, LESS και Stylus /*.(τύπος) */
σώμα (
φόντο: #EEE;
}
@import "reset.css";
@import "file.(type)";
Π(
φόντο: #0982C1;
)Μεταγλωττίστηκε το CSS @import "reset.css";
σώμα (
φόντο: #EEE;
}
Π(
φόντο: #0982C1;
)Χρωματικές λειτουργίες

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

Sass lighten($color, 10%); /* επιστρέφει ένα χρώμα 10% πιο ανοιχτό από το $color */
σκουραίνει ($χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% πιο σκούρο από το $color */
κορεσμένος ($χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% πιο κορεσμένο από το $color */
αποκορεσμένο ($χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% λιγότερο κορεσμένο από το $color */
κλίμακα του γκρι ($color); /* επιστρέφει κλίμακα του γκρι $color */
συμπλήρωμα($color); /* επιστρέφει το χρώμα του συμπληρώματος $color */
invert($color); /* επιστρέφει ανεστραμμένο χρώμα $color */
mix($color1, $color2, 50%); /* ανακατέψτε το $color1 με το $color2 με βάρος 50% */

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

Οι συναρτήσεις χρώματος μπορούν να χρησιμοποιηθούν οπουδήποτε χρησιμοποιείται χρώμα. Εδώ είναι ένα παράδειγμα:

$color: #0982C1;
h1 (
φόντο: $color;
περίγραμμα: 3 εικονοστοιχεία συμπαγές σκουρόχρωμο ($color, 50%).
}

LESS lighten(@color, 10%); /* επιστρέφει ένα χρώμα 10% πιο ανοιχτό από το @color */
darken(@color, 10%); /* επιστρέφει ένα χρώμα 10% πιο σκούρο από το @color */
κορεσμός (@color, 10%); /* επιστρέφει ένα χρώμα 10% πιο κορεσμένο από το @color */
desaturate(@color, 10%); /* επιστρέφει ένα χρώμα 10% λιγότερο κορεσμένο από το @color */
spin(@color, 10); /* επιστρέφει ένα χρώμα με 10 μοίρες μεγαλύτερη απόχρωση από το @color */
spin(@color, -10); /* επιστρέφει ένα χρώμα με 10 μοίρες μικρότερη απόχρωση από το @color */
mix(@color1, @color2); /* επιστρέψτε μια μίξη @color1 και @color2 */

Μπορείτε να βρείτε μια λίστα με όλες τις λειτουργίες LESS διαβάζοντας την Τεκμηρίωση LESS.

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

@color: #0982C1;
h1 (
χρώμα του φόντου;
περίγραμμα: 3 εικονοστοιχεία συμπαγές σκούρο (@color, 50%);
}

γραφίδα lighten (χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% πιο ανοιχτό από το "color" */
σκουραίνει (χρώμα, 10%). /* επιστρέφει ένα χρώμα 10% πιο σκούρο από το "χρώμα" */
κορεσμένο (χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% πιο κορεσμένο από το "χρώμα" */
αποκορεσμένο (χρώμα, 10%); /* επιστρέφει ένα χρώμα 10% λιγότερο κορεσμένο από το "χρώμα" */

Μπορείτε να βρείτε μια πλήρη λίστα με όλα τα χαρακτηριστικά χρώματος της γραφίδας διαβάζοντας την τεκμηρίωση της γραφίδας.

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

Χρώμα = #0982C1
h1
χρώμα του φόντου
περίγραμμα 3 εικονοστοιχεία στερεό σκούρο (χρώμα, 50%)

Λειτουργίες

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

Σώμα Sass, LESS και Stylus (
περιθώριο: (14px/2);
επάνω: 50px + 100px;
δεξιά: 100px - 50px;
αριστερά: 10 * 10;
)Πρακτικές εφαρμογές

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

Προθέματα προμηθευτή

Αυτός είναι ένας από τους λόγους για να χρησιμοποιήσετε έναν προεπεξεργαστή και για έναν πολύ καλό λόγο - εξοικονομεί πολύ χρόνο και δάκρυα. Η δημιουργία ενός mixin για τη διαχείριση των προθεμάτων προμηθευτή είναι εύκολη και εξοικονομεί πολλή επανάληψη και επίπονη επεξεργασία. Δείτε πώς να το κάνετε:

Sass @mixin border-radius($values) (
-webkit-border-radius: $values;
-moz-border-radius: $values;
border-radius: $values;
}
div(
@include border-radius(10px);
)LESS .border-radius(@values) (
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div(
.border-radius(10px);
)stilus border-radius(values) (
-webkit-border-radius: τιμές;
-moz-border-radius: τιμές;
σύνορα-ακτίνα: τιμές;
}
div(
border-radius(10px);
)Μεταγλωττισμένο CSS div (
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
περίγραμμα-ακτίνα: 10px;
) 3D κείμενο

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

Sass @mixin text3d($color) (
χρώμα: $color;
text-shadow: 1px 1px 0px darken($color, 5%),
2px 2px 0px σκούρο ($color, 10%),
3px 3px 0px σκούρο($color, 15%),
4px 4px 0px σκούρο($color, 20%),
4px 4px 2px #000;
}
h1 (
μέγεθος γραμματοσειράς: 32 pt;
@include text3d(#0982c1);
)LESS .text3d(@color) (
χρώμα: @color;
text-shadow: 1px 1px 0px darken(@color, 5%),
2px 2px 0px darken(@color, 10%),
3px 3px 0px darken(@color, 15%),
4px 4px 0px darken(@color, 20%),
4px 4px 2px #000;
}
έκταση (
μέγεθος γραμματοσειράς: 32 pt;
.text3d(#0982c1);
)γραφίδα κείμενο3d(έγχρωμο)
χρώμα: χρώμα
text-shadow: 1px 1px 0px darken(χρώμα, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20px4%), 2px #000
ιαματική πηγή
μέγεθος γραμματοσειράς: 32 pt
text3d(#0982c1)

Αποφάσισα να γράψω τις σκιές κειμένου Stylus σε μία γραμμή επειδή παρέλειψα τα σγουρά τιράντες.

Μεταγλωττισμένο διάστημα CSS (
μέγεθος γραμματοσειράς: 32 pt;
χρώμα: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
)Τελικό αποτέλεσμαΣτήλες

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

Sass $siteWidth: 1024 px;
$gutterWidth: 20px;
$sidebarΠλάτος: 300px;
σώμα (
περιθώριο: 0 αυτόματο;
πλάτος: $siteWidth;
}
.περιεχόμενο(
float: αριστερά;
πλάτος: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar(
float: αριστερά;
margin-αριστερά: $gutterWidth;
πλάτος: $sidebarWidth;
)LESS @siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarΠλάτος: 300px;
σώμα (
περιθώριο: 0 αυτόματο;
πλάτος: @siteWidth;
}
.περιεχόμενο(
float: αριστερά;
πλάτος: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar(
float: αριστερά;
περιθώριο-αριστερά: @gutterWidth;
πλάτος: @sidebarWidth;
)stilus siteWidth = 1024px;
Πλάτος υδρορροής = 20 px;
sidebar Πλάτος = 300 px;
σώμα (
περιθώριο: 0 αυτόματο;
πλάτος: siteWidth;
}
.περιεχόμενο(
float: αριστερά;
πλάτος: siteWidth - (sidebarWidth+GutterWidth);
}
.sidebar(
float: αριστερά;
περιθώριο-αριστερά: gutterWidth;
πλάτος: πλαϊνή γραμμήΠλάτος;
)Μεταγλωττισμένο σώμα CSS (
περιθώριο: 0 αυτόματο;
πλάτος: 1024 px;
}
.περιεχόμενο(
float: αριστερά;
πλάτος: 704 px;
}
.sidebar(
float: αριστερά;
περιθώριο-αριστερά: 20 px;
πλάτος: 300 px;
)Υπέροχοι τρόποι

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

Αναφορές σφαλμάτων

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

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

Σήμερα θέλω να μιλήσω για το γιατί και πώς χρησιμοποιήσαμε τον προεπεξεργαστή Stylus στην ανάπτυξη του Yandex.Mail και επίσης να περιγράψω τη μέθοδο που χρησιμοποιούμε για την εργασία με στυλ για IE. Είναι πολύ εύκολο να εφαρμοστεί χρησιμοποιώντας προεπεξεργαστές και κάνει την υποστήριξη IE απλή και βολική. Έχουμε αναπτύξει μια ειδική βιβλιοθήκη για αυτό, την οποία θα μοιραστούμε επίσης - if-ie.styl.

Αυτό είναι μόνο το πρώτο άρθρο μιας σειράς άρθρων σχετικά με τη χρήση του προεπεξεργαστή Stylus στο Yandex.Mail, το οποίο ετοιμάζουμε για δημοσίευση.

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

Επιπλέον, έχει ήδη περισσότερα από τριάντα θέματα σχεδιασμού. Υπάρχουν θέματα με ανοιχτόχρωμο φόντο και με σκούρο, υπάρχουν θέματα που διαφέρουν μεταξύ τους μόνο στα χρώματα και υπάρχουν επίσης εκείνα στα οποία σχεδόν ολόκληρη η διεπαφή είναι χυτευμένη από πλαστελίνη με το χέρι (http://habrahabr.ru /company/yandex/blog/110556/ ). Ορισμένα θέματα έχουν μόνο μία εικόνα φόντου, ενώ άλλα μπορεί να αλλάξουν το φόντο - τυχαία ή ανάλογα με την ώρα της ημέρας και τον καιρό.

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

Όταν ξεκινήσαμε για πρώτη φορά τη διεπαφή neo2, επιλέξαμε μια λύση που ήταν οικεία σε εμάς - τη μηχανή προτύπων Template Toolkit 2, με ένα κάπως μη τυπικό σενάριο για τη χρήση της για τη δημιουργία CSS και όχι HTML. Στην αρχή χρειαζόμασταν μόνο μεταβλητές, αλλά με την πάροδο του χρόνου τα θέματα έγιναν πιο περίπλοκα και στο τέλος αποδείχθηκε ότι ένα τέτοιο εργαλείο ήταν άβολο. Η δυσκίνητη σύνταξη, η έλλειψη συναρτήσεων ειδικά για το CSS και η γενική αίσθηση χρήσης του εργαλείου για άλλους σκοπούς μας έκαναν να αναζητήσουμε άλλες επιλογές. Συνειδητοποιήσαμε ότι δεν μπορούσαμε να κάνουμε χωρίς προεπεξεργαστή.

Επιλογή προεπεξεργαστή Επιλέξαμε ανάμεσα σε τρεις επιλογές: Sass, Less και Stylus. Η διαδικασία ήταν αρκετά απλή: πήραμε πολλά υπάρχοντα μπλοκ και στη συνέχεια προσπαθήσαμε να τα επανασχεδιάσουμε χρησιμοποιώντας κάθε έναν από τους προεπεξεργαστές.

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

Φυσικά, εκτός από τα πλεονεκτήματα, το Stylus έχει και μειονεκτήματα. Και το κύριο είναι η ευέλικτη σύνταξη - οι συντάκτες του προεπεξεργαστή το θεωρούν το κύριο πλεονέκτημά του. Επιδιώκοντας την ευελιξία, εφάρμοσαν πλήρως μόνο τη σύνταξη με βάση την εσοχή, ενώ η επιλογή "a la CSS" είναι κατά κάποιο τρόπο βιδωμένη από πάνω και δεν θα είναι δυνατό να πάρουμε και να μετονομάσουμε το .css σε .styl - όχι όλα τα CSS Οι επιλογές γραφής θα λειτουργήσουν και στη γραφίδα. Αποφασίσαμε όμως ότι οι δυνατότητες που μας δίνει αυτός ο προεπεξεργαστής καθιστούν τις ελλείψεις του λιγότερο σημαντικές, οπότε έπρεπε να ανεχτούμε κάποια από τα ιδιότροπα του αναλυτή (και να αρχίσουμε να χρησιμοποιούμε σύνταξη βασισμένη σε εσοχές).

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

Ωστόσο, πρέπει να σας πούμε για μια ακόμη λειτουργία που αποδείχθηκε πολύ χρήσιμη για εμάς ως μέρος της θεματοποίησης του Yandex.Mail. Αυτή είναι η συνάρτηση rgba-ie. Στην πραγματικότητα, αυτή η συνάρτηση θα μπορούσε απλώς να ονομάζεται rgba, αλλά το Stylus έχει ένα σφάλμα: οι συναρτήσεις που ορίζονται στο JS δεν μπορούν να παρακαμφθούν με τον ίδιο τρόπο όπως αυτές που ορίζονται στο Stylus, επομένως έπρεπε να δημιουργήσουμε μια νέα.

Τι κάνει; Τα παλαιότερα IE δεν υποστηρίζουν τιμές χρώματος που καθορίζονται σε μορφή rgba. Επομένως, συνήθως οι προγραμματιστές είτε καθορίζουν τα αντίστοιχα χρώματα δύο φορές - πρώτα για το παλιό IE στη συνηθισμένη μορφή hex και μετά για όλα τα κανονικά προγράμματα περιήγησης στο επιθυμητό rgba - είτε χρησιμοποιούν modernizr και, χρησιμοποιώντας το και την κλάση .rgba, ορίζουν τα αντίστοιχα χρώματα όπου απαιτείται. Αλλά για εναλλακτικές λύσεις στον IE, κάθε φορά πρέπει ακόμα να υπολογίσουμε το κατά προσέγγιση χρώμα του σε τι θα το υποβαθμίσουμε. Τις περισσότερες φορές αυτό θα είναι το επιθυμητό χρώμα που επικαλύπτεται στην κορυφή του φόντου της σελίδας ή στο φόντο του μεσαίου στοιχείου, με ένα χρώμα rgba που εφαρμόζεται πάνω από αυτό.

Η συνάρτηση rgba-ie από το if-ie.styl απλοποιεί πολύ αυτήν την εργασία: αντιγράφοντας τις δυνατότητες της κανονικής συνάρτησης rgba, λαμβάνουμε μια άλλη προαιρετική παράμετρο που μπορεί να μεταβιβαστεί στη συνάρτηση - το χρώμα φόντου για την εναλλακτική. Από προεπιλογή, αυτή η παράμετρος έχει οριστεί σε #FFF .

Απλό παράδειγμα:

Χρώμα Foo: rgba-ie(0,0,0,0,5)

Σε κανονικά προγράμματα περιήγησης αυτό το χρώμα θα είναι το συνηθισμένο rgba(0,0,0,0.5) , αλλά στο IE θα μετατραπεί σε #808080 - δηλαδή το αντίστοιχο χρώμα που επικαλύπτεται πάνω από το λευκό.

Ένα πιο περίπλοκο παράδειγμα, με το φόντο προορισμού ως το τελευταίο όρισμα (και χρησιμοποιώντας μία από τις δυνατότητες της γραφίδας - τη δυνατότητα να καθορίσετε ένα εξάγωνο χρώμα αντί για τρία ψηφία r , g και b):

Foo φόντο: rgba-ie(#FFDE00, .42, #19C261)

Σε αυτό το παράδειγμα, για κανονικά προγράμματα περιήγησης το χρώμα θα είναι rgba(255,222,0,0.42) , αλλά ο IE θα πάρει το σωστό #7ace38 .

Ταυτόχρονα, είναι δυνατό να ορίσετε την προεπιλεγμένη εναλλακτική χρησιμοποιώντας τη μεταβλητή $default_rgba_fallback.

Ως αποτέλεσμα, μπορείτε να απλοποιήσετε πολύ τη ζωή σας εάν χρησιμοποιήσετε τη συνάρτηση rgba-ie αντί για τη συνηθισμένη rgba - σε αυτήν την περίπτωση σχεδόν δεν θα χρειαστεί να θυμάστε τον IE.

Ετικέτες:

Προσθέστε ετικέτες