Προεπεξεργαστής CSS: επισκόπηση, επιλογή, εφαρμογή

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

Πώς προεπεξεργαστές CSS εμφανίστηκαν

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

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

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

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

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

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

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

• Ενοποιήστε τα προθέματα του browser και τα hacks.

• Απλοποιήστε τη σύνταξη.

• Να επιτρέπεται η εργασία με ενσωματωμένους επιλογείς χωρίς σφάλματα.

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

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

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

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

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

Δηλώνοντας μεταβλητές στο Sass

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

Το Sass έχει πολλές ενσωματωμένες λειτουργίες. Σας συνιστούμε τουλάχιστον να εξοικειωθείτε με αυτούς και να μάθετε καλύτερα.

Φωτισμός

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

Div {

Χρώμα: κόκκινο;

}}

Div p {

Χρώμα: κίτρινο.

}}

Div p span {

Χρώμα: ροζ?

}}

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

Div {

Χρώμα: κόκκινο;

P {

Χρώμα: κίτρινο.

.span {

Χρώμα: ροζ?

}}

}}

}}

Τα στοιχεία κυριολεκτικά "τοποθετούνται" το ένα μέσα στο άλλο.

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

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

Mixins

Ένα από τα πιο ενδιαφέροντα zadumok. Επιτρέπει μια σειρά ιδιοτήτων να προσδιορίζονται σε μία γραμμή. Εργασία ως εξής:

@mixin largeFont {

Γραμματοσειρά: 'Times New Roman';

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

Γραμμή-ύψος: 80px;

Βάρος γραμματοσειράς: έντονο.

}}

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

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

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

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

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

Stylus

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

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

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

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

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

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

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