LESS CSS - Οδηγός για αρχάριους
Ο προ-επεξεργαστής CSS έχει γίνει πλέον βασικός στην ανάπτυξη ιστού. Φέρνει απλό CSS με χαρακτηριστικά προγραμματισμού όπως Μεταβλητές, Λειτουργίες ή Mixin και Λειτουργία που επιτρέπουν στους προγραμματιστές να χτίσουν αρθρωτά, κλιμακούμενα και πιο διαχειρίσιμα στυλ CSS.
Σε αυτήν την ανάρτηση, θα εξετάσουμε το LESS που είναι ένας από τους πιο δημοφιλείς CSS Pre-επεξεργαστές γύρω, και έχει επίσης αναπτυχθεί ευρέως σε πολλά front-end πλαίσια όπως το Bootstrap. Θα περάσουμε επίσης μέσα από το βασικά βοηθητικά προγράμματα, εργαλεία και ρυθμίσεις για να σας βοηθήσουν να ξεκινήσετε με λιγότερες λειτουργίες.
Ο μεταγλωττιστής
Αρχικά, θα χρειαστεί να ρυθμίσετε έναν μεταγλωττιστή. Η σύντομη σύνταξη είναι μη τυποποιημένη, σύμφωνα με τις προδιαγραφές του W3C. Το πρόγραμμα περιήγησης δεν θα είναι σε θέση να επεξεργαστεί και να καταστήσει την έξοδο παρά τα κληρονομικά χαρακτηριστικά παρόμοια με τα CSS.
Ακολουθεί μια ματιά στον κώδικα ΜΗΝ:
@ έγχρωμη βάση: # 2d5e8b; .class1 χρώμα φόντου: @ βάση βάσης; .class2 χρώμα-φόντου: #fff; χρώμα: @ χρώμα-βάση?
Ο μεταγλωττιστής θα επεξεργαστεί τον κώδικα και θα μετατρέψει τη σύντομη σύνταξη σε μορφή CSS συμβατού με το πρόγραμμα περιήγησης:
.class1 χρώμα-φόντου: # 2d5e8b; .class1 .class2 χρώμα-φόντου: #fff; χρώμα: # 2d5e8b;
Υπάρχουν διάφορα εργαλεία για την δημιουργία CSS:
Χρήση του JavaScript
Λιγότερο έρχεται με ένα less.js αρχείο που είναι πραγματικά εύκολο να αναπτυχθεί στον ιστότοπό σας. Δημιουργήστε ένα φύλλο στυλ με .πιο λιγο επέκταση και συνδέστε το στο έγγραφό σας χρησιμοποιώντας το rel = "stylesheet / less" Χαρακτηριστικό.
Μπορείτε να λάβετε το αρχείο JS εδώ, να το κατεβάσετε μέσω του διαχειριστή πακέτων Bower, αλλιώς να συνδεθείτε απευθείας με το CDN, όπως π.χ.:
Όλοι είστε έτοιμοι και μπορείτε να συνθέσετε στυλ μέσα στο .πιο λιγο. Η σύντομη σύνταξη θα συντάσσεται εκ περιτροπής καθώς φορτώνεται η σελίδα. Εχε στο νου σου οτι η χρήση του JavaScript αποθαρρύνεται στο στάδιο της παραγωγής καθώς θα επηρεάσει αρνητικά την απόδοση του ιστότοπου.
Θα πρέπει πάντα να συντάξετε την σύντομη σύνταξη εκ των προτέρων και μόνο εξυπηρετούν τακτικά CSS αντι αυτου. Μπορείς να χρησιμοποιήσεις Τερματικό, έναν δρομέα εργασίας όπως Γρυλλισμός ή Χαψιά, ή μια γραφική εφαρμογή για να γίνει αυτό.
Χρήση του CLI
Το LESS παρέχει μια φυσική διεπαφή γραμμής εντολών (CLI), λιγότερο, το οποίο χειρίζεται διάφορες εργασίες εκτός από τη σύνταξη της σύνταξης LESS. Χρησιμοποιώντας το CLI, μπορούμε να λυγίσουμε τους κώδικες, να συμπιέσουμε τα αρχεία και να δημιουργήσουμε έναν πηγαίο χάρτη. Η εντολή βασίζεται στο Node.js που επιτρέπει στην εντολή να λειτουργεί με Windows, OS X και Linux.
Βεβαιωθείτε ότι έχει εγκατασταθεί το Node.js (διαφορετικά αρπάξτε τον εγκαταστάτη εδώ) και, στη συνέχεια, εγκαταστήστε το LESS CLI μέσω του NPM (Node Package Manager) χρησιμοποιώντας την ακόλουθη γραμμή εντολών.
npm install -g λιγότερο
Τώρα έχετε το λιγότερο εντολή στη διάθεσή σας για να μεταγλωττίσετε λιγότερο στο CSS:
style.css
Χρήση του Εργαλείου εκτέλεσης εργασιών
Το Task runner είναι ένα εργαλείο που αυτοματοποιεί τις εργασίες ανάπτυξης και τις ροές εργασίας. Αντί να εκτελέσετε το λιγότερο εντολή κάθε φορά που θα θέλαμε να καταρτίσουμε τους κώδικες μας, μπορούμε να ρυθμίσουμε την εγκατάσταση ενός δρομέα εργασιών και να την ορίσουμε για να παρακολουθήσουμε αλλαγές στα αρχεία μας ΜΑΙΟΣ και να μεταγλωττίσουμε αμέσως στο CSS.
Δύο δημοφιλή εργαλεία σε αυτή την κατηγορία σήμερα είναι η Grunt και η Gulp. Έχουμε μια σειρά μηνυμάτων που καλύπτουν αυτά τα εργαλεία. Ελέγξτε τις θέσεις για να μάθετε πώς να αναπτύξετε αυτά τα εργαλεία στη ροή εργασίας σας.
- Πώς να χρησιμοποιήσετε το Grunt για να αυτοματοποιήσετε τη ροή εργασίας σας
- Ξεκινώντας με το Gulp.js
- Η μάχη της κατασκευής σεναρίων: Gulp Vs Grunt
Χρήση γραφικής εφαρμογής
Για όσους δεν είναι συνηθισμένοι να χρησιμοποιούν το τερματικό και τις γραμμές εντολών, μπορούν αντ 'αυτού να επιλέξουν μια γραφική διεπαφή. Υπάρχει αφθονία εφαρμογών για την κατάρτιση LESS σήμερα για όλες τις πλατφόρμες - μερικές δωρεάν, μερικές πληρωμένες
Εδώ είναι ο πλήρης κατάλογος:
| App | Πλατφόρμα | Κόστος |
| Μίγμα | OS X / Windows | Ελεύθερος |
| Δενδρόβιο ζώο της αυστραλίας | OS X / Windows / Linux | Ελεύθερος |
| Πρέπρος | OS X / Windows | Freemium (USD29) |
| WinLESS | Windows | Ελεύθερος |
| CodeKit | OS X | USD32 |
Όποιος μεταγλωττιστής επιλέγετε (εκτός από το JavaScript) δεν έχει σημασία, ειλικρινά, εφ 'όσον το εργαλείο λειτουργεί και συμπληρώνει τη ροή εργασίας σας, πηγαίνετε γι' αυτό.
Ο Κωδικοποιητής
Μπορείτε να χρησιμοποιήσετε οποιονδήποτε επεξεργαστή κωδικών. Απλά εγκαταστήστε ένα plugin ή μια επέκταση για να επισημάνετε τη σύντομη σύνταξη με τα κατάλληλα χρώματα, μια δυνατότητα που είναι τώρα διαθέσιμη για σχεδόν όλους τους επεξεργαστές κώδικα και τους IDE, όπως το SublimeText, το Notepad ++, το VisualStudio, το TextMate και το Eclipse.
Τώρα που έχουμε τον μεταγλωττιστή και τον επεξεργαστή κώδικα όλα ρυθμισμένα, μπορούμε να αρχίσουμε να γράφουμε στυλ CSS με σύντομη σύνταξη.
Λιγότερη Σύνταξη
Σε αντίθεση με το κανονικό CSS όπως το ξέρουμε, το LESS λειτουργεί πολύ περισσότερο σαν μια γλώσσα προγραμματισμού. Είναι δυναμική, επομένως περιμένετε να βρείτε μερικές ορολογίες όπως Μεταβλητές, Λειτουργία και Πεδίο εφαρμογής στην πορεία.
Μεταβλητές
Πρώτα απ 'όλα, ας ρίξουμε μια ματιά στο Μεταβλητές.
Εάν έχετε δουλέψει πολύ λίγο με το CSS, ίσως έχετε γράψει κάτι τέτοιο, όπου έχουμε επαναλαμβανόμενες τιμές ανατεθεί σε μπλοκ δήλωσης σε ολόκληρο το φύλλο στυλ.
.class1 χρώμα-φόντου: # 2d5e8b; .class2 χρώμα-φόντου: #fff; χρώμα: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Αυτή η πρακτική είναι πραγματικά ωραία - έως ότου βρεθούμε ότι πρέπει να περάσουμε περισσότερο από χιλιάδες ή περισσότερα παρόμοια αποσπάσματα σε όλο το φύλλο στυλ. Αυτό θα μπορούσε να συμβεί κατά την οικοδόμηση ενός δικτυακού τόπου μεγάλης κλίμακας. Η εργασία θα γίνει κουραστική.
Εάν χρησιμοποιούμε έναν προ-επεξεργαστή CSS, όπως το λιγότερο, η παραπάνω περίπτωση δεν θα ήταν πρόβλημα - μπορούμε να το χρησιμοποιήσουμε Μεταβλητές. Οι μεταβλητές θα μας επιτρέψουν να αποθηκεύσουμε μια σταθερά αξία που αργότερα μπορεί να επαναχρησιμοποιηθεί σε ολόκληρο το φύλλο στυλ.
@ έγχρωμη βάση: # 2d5e8b; .class1 χρώμα φόντου: @ βάση βάσης; .class2 χρώμα-φόντου: #fff; χρώμα: @ χρώμα-βάση? .class3 border: 1px solid @ color-base;
Στο παραπάνω παράδειγμα αποθηκεύουμε το χρώμα # 2d5e8b στο @ έγχρωμη βάση μεταβλητός. Όταν θέλετε να αλλάξετε το χρώμα, χρειάζεται μόνο να αλλάξετε την τιμή σε αυτήν τη μεταβλητή.
Εκτός από το χρώμα, μπορείτε επίσης να βάλετε άλλες τιμές στις μεταβλητές όπως για παράδειγμα:
@ γραμματοσειρά: Georgia @ dot-border: διακεκομμένη @ μεταβατική: linear @opacity: 0.5
Mixins
Σε λιγότερο, μπορούμε να χρησιμοποιήσουμε Mixins να επαναχρησιμοποιήσουν ολόκληρες διακηρύξεις σε έναν κανόνα CSS που έχει οριστεί σε άλλο σύνολο κανόνων. Ακολουθεί ένα παράδειγμα:
.κλίσεις φόντο: #eaeaea; φόντο: γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -ο-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -ms-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -moz-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -webkit-γραμμική κλίση (κορυφή, #eaeaea, #cccccc);
Στο παραπάνω απόσπασμα έχουμε προκαθορισμένη προεπιλογή βαθμίδα χρώμα μέσα στο .κλίσεις τάξη. Κάθε φορά που θέλουμε να προσθέσουμε τις κλίσεις απλά εισάγουμε το .κλίσεις με αυτόν τον τρόπο:
div .gradients; σύνορα: 1px στερεά # 555; ακτίνα ακτίνων: 3px;
ο .κουτί θα κληρονομήσει όλο το μπλοκ δήλωσης μέσα στο .κλίσεις. Επομένως, ο κανόνας CSS παραπάνω είναι ίσος με τον ακόλουθο απλό CSS:
div φόντο: #eaeaea; φόντο: γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -ο-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -ms-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -moz-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); υπόβαθρο: -webkit-γραμμική κλίση (κορυφή, #eaeaea, #cccccc); σύνορα: 1px στερεά # 555; ακτίνα ακτίνων: 3px;
Επιπλέον, αν χρησιμοποιείτε πολύ CSS3 στον ιστότοπό σας, μπορείτε να χρησιμοποιήσετε τα ΜΕΙΟΝ Στοιχεία για να κάνετε τη δουλειά σας πολύ πιο εύκολη. Τα λιγότερο στοιχεία είναι μια συλλογή κοινών CSS3 Mixins που μπορούμε συχνά να χρησιμοποιούμε σε φύλλα στυλ, όπως ακτίνα ακρόασης, κλίσεις, σκίαση και ούτω καθεξής.
Για να χρησιμοποιήσετε λιγότερα στοιχεία, απλά προσθέστε το @εισαγωγή κανόνα στο LESS φύλλο στυλ σας, αλλά μην ξεχάσετε να το κατεβάσετε πρώτα και να το προσθέσετε στον κατάλογο εργασίας σας.
@import "elements.less";
Μπορούμε τώρα να επαναχρησιμοποιήσουμε όλα τάξεις που παρέχεται από το elements.less, για παράδειγμα, να προσθέσετε 3px ακραία ακτίνα σε a div, μπορούμε να γράψουμε:
div .περιβάλλον (3px);
Για περαιτέρω χρήση, ανατρέξτε στην επίσημη τεκμηρίωση.
Φυτευμένοι κανόνες
Όταν γράφετε στυλ σε απλό CSS, ίσως έχετε έρθει από αυτές τις τυπικές δομές κώδικα.
nav ύψος: 40px; πλάτος: 100%. φόντο: # 455868; σύνορα-κάτω: 2px στερεά # 283744; nav li πλάτος: 600px; ύψος: 40px; nav li a χρώμα: #fff; γραμμή-ύψος: 40px; σκιά κειμένου: 1px 1px 0px # 283744;
Στην απλή CSS, επιλέγουμε τα παιδικά στοιχεία, στοχεύοντας πρώτα τον γονέα σε κάθε σύνολο κανόνων, κάτι που είναι πολύ περιττό αν ακολουθήσουμε “βέλτιστες πρακτικές” αρχή.
Στο LESS CSS, μπορούμε να απλοποιήσουμε τα σύνολα κανόνων από φωλιάζοντας τα παιδικά στοιχεία μέσα στους γονείς, ως εξής;
nav ύψος: 40px; πλάτος: 100%. φόντο: # 455868; σύνορα-κάτω: 2px στερεά # 283744; li πλάτος: 600px; ύψος: 40px; α χρώμα: #fff; γραμμή-ύψος: 40px; σκιά κειμένου: 1px 1px 0px # 283744;
Μπορείτε επίσης να αντιστοιχίσετε ψευδο-τάξεις, σαν :φτερουγίζω, στο επιλογέα χρησιμοποιώντας το σύμβολο ampersand (&).
Ας υποθέσουμε ότι θέλουμε να προσθέσουμε :φτερουγίζω στην παραπάνω ετικέτα αγκύρωσης, μπορούμε να την γράψουμε με αυτόν τον τρόπο:
α χρώμα: #fff; γραμμή-ύψος: 40px; σκιά κειμένου: 1px 1px 0px # 283744; &: περάστε το background-color: # 000; χρώμα: #fff;
Λειτουργία
Μπορούμε επίσης να εκτελέσουμε εργασίες σε λιγότερο, όπως προσθήκη, αφαίρεση, πολλαπλασιασμό και διαίρεση σε αριθμούς, χρώματα και μεταβλητές στο φύλλο στυλ.
Ας υποθέσουμε ότι θέλουμε το στοιχείο Β να είναι δύο φορές υψηλότερο από το στοιχείο Α. Στην περίπτωση αυτή, μπορούμε να το γράψουμε με αυτόν τον τρόπο:
@height: 100px. στοιχείο-A ύψος: @ κορυφή; . στοιχείο-Β ύψος: @ κορυφή * 2;
Όπως μπορείτε να δείτε παραπάνω, αποθηκεύουμε πρώτα την τιμή στο @ύψος μεταβιβάσετε την τιμή στο στοιχείο Α.
Στο στοιχείο Β, αντί να υπολογίζουμε τον εαυτό μας, μπορούμε να πολλαπλασιάσουμε το ύψος κατά 2 χρησιμοποιώντας τον χειριστή αστερίσκου (*). Τώρα, κάθε φορά που αλλάζουμε την τιμή στο @ύψος μεταβλητός, στοιχείο Β θα έχει πάντα το διπλάσιο ύψος.
Ανατρέξτε σε πιο εξελιγμένα παραδείγματα λειτουργίας στο προηγούμενο σεμινάριο μας: Σχεδίαση μιας γραμμής πλοήγησης με λεπτές επιλογές.
Πεδίο εφαρμογής
Λιγότερο ισχύει το Πεδίο εφαρμογής όπου οι μεταβλητές θα κληρονομηθούν πρώτα από την τοπική εμβέλεια και όταν δεν θα είναι διαθέσιμες σε τοπικό επίπεδο, θα αναζητήσουν μέσα από ένα ευρύτερο πεδίο.
κεφαλίδα @color: μαύρο; φόντο-χρώμα: @color; nav @color: μπλε; φόντο-χρώμα: @color; α χρώμα: @color;
Στο παραπάνω παράδειγμα, το επί κεφαλής έχει ένα μαύρος χρώμα φόντου, αλλά navτο χρώμα φόντου θα είναι μπλε καθώς έχει τη μεταβλητή @color στο τοπικό πεδίο εφαρμογής της, ενώ η ένα θα έχει επίσης μπλε που κληρονομείται από τον πλησιέστερο γονέα της, nav.
Τελική σκέψη
Τελικά, ελπίζουμε ότι αυτή η ανάρτηση μπορεί να σας δώσει μια βασική κατανόηση για το πώς μπορούμε να γράψουμε CSS με καλύτερο τρόπο χρησιμοποιώντας το LESS. Ίσως να αισθάνεστε λίγο αδέξιος στην αρχή, αλλά όπως το δοκιμάζετε πιο συχνά, σίγουρα θα γίνει πολύ πιο εύκολο.
Εδώ είναι μερικά μαθήματα που σας ενθαρρύνω να αναζητήσετε περαιτέρω συμβουλές και πρακτικές, οι οποίες μπορούν να σας βοηθήσουν να ωθήσετε τις ικανότητές σας ΜΑΚΡΙΑ μέχρι το επόμενο επίπεδο.
- LESS CSS Tutorial: Σχεδίαση μιας γραμμής πλοήγησης με λείο μενού
- Κατανόηση των Λιγότερων λειτουργιών χρωμάτων
- 3 Νέα Χαμηλά Χαρακτηριστικά CSS πρέπει να γνωρίζετε
