Τι είναι το λιγότερο CSS και πώς το χρησιμοποιείτε;

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

Το Less (Leaner Style Sheets) είναι μια επέκταση του CSS με πολλά ισχυρά χαρακτηριστικά. Εάν γνωρίζετε CSS, τότε η εκμάθηση του Less είναι εύκολη, επειδή η σύνταξη του Less είναι πολύ παρόμοια.

Πώς να εγκαταστήσετε λιγότερα

Μπορείτε να εγκαταστήσετε το Less με το JavaScript Package Manager, NPM τρέχοντας:

npm εγκατάσταση λιγότερο -g

Μετά την εγκατάσταση, μπορείτε να κάνετε μεταγλώττιση .πιο λιγο αρχεία σε .css χρησιμοποιώντας την λιγότεροc εντολή. Για παράδειγμα, η ακόλουθη εντολή μεταγλωττίζεται στυλ.λιγότερο και βγάζει τα αποτελέσματα σε α στυλ.css αρχείο.

λιγότερο στυλ.λιγότερο στυλ.css

Μεταβλητές σε Less

Διαφορετικός

κανονικό CSS, το οποίο χρησιμοποιεί τον τελεστή "--" για να ορίσει μεταβλητέςΤο Less ορίζει μεταβλητές χρησιμοποιώντας το σύμβολο "@". Για παράδειγμα:

@πλάτος:40 εικονοστοιχεία;
@ύψος:80 εικονοστοιχεία;

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

Δείτε πώς μπορείτε να χρησιμοποιήσετε μεταβλητές στο Less. Δημιουργήστε ένα ευρετήριο.htm αρχείο και προσθέστε τον ακόλουθο κωδικό boilerplate:

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταhttp-equiv="Χ-UA-Συμβατό"περιεχόμενο="IE=άκρη">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">
<τίτλος>Χρησιμοποιώντας λιγότερο CSSτίτλος>
κεφάλι>
<σώμα>
<div>
 Γεια σας από τα παιδιά του πλανήτη Γη!
div>
σώμα>
html>

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

@πλάτος:400 εικονοστοιχεία;
@ύψος:400 εικονοστοιχεία;
@vertical-center: κέντρο;
@txt-white: άσπρο;
@bg-red: rgb(220, 11, 11);
@font-40:40 εικονοστοιχεία;
div {
πλάτος: @πλάτος;
ύψος: @ύψος;
απεικόνιση: flex;
χρώμα: @txt-white;
χρώμα του φόντου: @bg-red;
μέγεθος γραμματοσειράς: @font-40;
}

Τώρα, όταν μπορείτε να μεταγλωττίσετε το .πιο λιγο αρχείο σε .css χρησιμοποιώντας την λιγότεροc εντολή:

λιγότερο στυλ.λιγότερο στυλ.css

Το μεταγλωττισμένο CSS θα πρέπει να μοιάζει με αυτό:

div {
πλάτος: 400px;
ύψος: 400px;
απεικόνιση: καλώδιο;
χρώμα: άσπρο;
χρώμα του φόντου: #dc0b0b;
μέγεθος γραμματοσειράς: 40px;
}

Όταν ανοίγετε το πρόγραμμα περιήγησής σας, αυτό είναι που πρέπει να δείτε:

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

@custom-selector: δοχείο;
.@{custom-selector} {
υλικό παραγεμίσματος: 10 εικονοστοιχεία;
περιθώριο: 10 εικονοστοιχεία;
σύνορο: στερεό 10 εικονοστοιχεία;
}

Το μπλοκ κώδικα παραπάνω χρησιμοποιεί το @{...} όρος για να χρησιμοποιήσετε μια μεταβλητή ως επιλογέα. Κατά τη μεταγλώττιση, ο κώδικας θα έχει ως αποτέλεσμα τα εξής:

.δοχείο{
υλικό παραγεμίσματος: 10px;
περιθώριο: 10px;
σύνορο: στερεός 10px;
}

Αριθμητικές Πράξεις σε Λιγότερο

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

@variable-1:5 εικονοστοιχεία;
// Πολλαπλασιασμός Πράξη μεταξύ μεταβλητής και σταθεράς
@variable-2:@variable-1 * 2
// Λειτουργία πρόσθεσης μεταξύ τιμής και μεταβλητής.
@variable-3:10 εικονοστοιχεία + @variable-2

Πώς να χρησιμοποιήσετε τα μείγματα

Το Mixins σάς επιτρέπει να χρησιμοποιείτε ξανά στυλ (ή κώδικα CSS) σε όλο το φύλλο στυλ. Αλλα Επεκτάσεις CSS όπως το Sass προσφέρουν επίσης Mixins. Για να δείξετε πώς λειτουργούν τα mixins στο Less, δημιουργήστε ένα index.htm και προσθέστε τον ακόλουθο κώδικα:

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταhttp-equiv="Χ-UA-Συμβατό"περιεχόμενο="IE=άκρη">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">
<τίτλος>Χρησιμοποιώντας λιγότερο CSSτίτλος>
κεφάλι>
<σώμα>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Σολούτα
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
div>
<Π>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Σολούτα
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
Π>
<Π>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Σολούτα
 architecto repudiandae ipsum animi velit id iste dolore reprehenderit
 dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
Π>
σώμα>
html>

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

.δείγμα κειμένου() {
χρώμα του φόντου: κίτρινο;
}
.πρώτο γράμμα() {
χρώμα του φόντου: το κόκκινο;
χρώμα: άσπρο;
μέγεθος γραμματοσειράς: 30 εικονοστοιχεία;
}
Π {
.δείγμα κειμένου();
}
Π::πρώτο γράμμα {
.πρώτο γράμμα();
}

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

Style Nesting in Less

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

divΠ {
χρώμα: το κόκκινο;
}
div {
χρώμα: πράσινος
}

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

div {
χρώμα: πράσινο;
Π {
χρώμα: το κόκκινο;
 }
}

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

κουμπί {
χρώμα του φόντου: μπλε;
σύνορο: κανένα;
&:φτερουγίζω {
χρώμα του φόντου: γκρι;
μεταμορφώνω: κλίμακα(1.2);
 }
}

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

κουμπί {
χρώμα του φόντου: μπλε;
σύνορο: κανένας;
}
κουμπί:φτερουγίζω {
χρώμα του φόντου: γκρί;
μεταμορφώνω: κλίμακα(1.2);
}

Κατανόηση του πεδίου και των λειτουργιών σε λιγότερα

Όπως οι κανονικές γλώσσες προγραμματισμού, οι μεταβλητές έχουν το εύρος του μπλοκ στο οποίο τις ορίζετε. Για να το δείξετε αυτό, δημιουργήστε ένα νέο ευρετήριο.htm και προσθέστε τον πρώτο κώδικα boilerplate HTML που δόθηκε προηγουμένως. Στη συνέχεια, προσθέστε το ακόλουθο μπλοκ στο σώμα ετικέτα:

<divτάξη="outer-div">
 Το Outer Div πρέπει να είναι κόκκινο.
<br />
<σπιθαμήτάξη="inner-div">
 Το εσωτερικό div πρέπει να είναι πράσινο.
σπιθαμή>
div>

Στο στυλ.λιγότερο αρχείο, προσθέστε τις ακόλουθες γραμμές:

@bg-color: το κόκκινο;
σώμα {
μέγεθος γραμματοσειράς: 40 εικονοστοιχεία;
χρώμα: άσπρο;
περιθώριο: 20 εικονοστοιχεία;
}
.inner-div {
@bg-color: πράσινος;
χρώμα του φόντου: @bg-color;
}
.outer-div {
χρώμα του φόντου: @bg-color;
}

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

Το Less παρέχει επίσης εύχρηστες λειτουργίες που μπορεί να είναι ευεργετικές σε ορισμένα σενάρια. Για παράδειγμα, εάν θέλετε να ορίσετε ένα στυλ μόνο εάν πληρούται μια συγκεκριμένη προϋπόθεση, μπορείτε να το κάνετε με το αν λειτουργία. Αυτή η συνάρτηση έχει την ακόλουθη σύνταξη:

αν((συνθήκη), τιμή 1, τιμή 2)

Ο κωδικός επιστρέφει τιμή 1 εάν πληρούται η προϋπόθεση και τιμή 2 σε διαφορετική περίπτωση. Εδώ είναι ένα παράδειγμα:

@var1:20 εικονοστοιχεία;
@var2:20 εικονοστοιχεία;
div {
υλικό παραγεμίσματος: αν((@var1 = @var2), 10 εικονοστοιχεία, 20 εικονοστοιχεία);
}

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

div {
υλικό παραγεμίσματος: 10px;
}

Κάντε περισσότερα με Less και άλλες επεκτάσεις CSS

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

Το Less είναι κατάλληλο τόσο για μικρά όσο και για μεγάλα έργα. Αξίζει να σημειωθεί ότι άλλες εξίσου εκπληκτικές γλώσσες επέκτασης CSS όπως η Sass και η Stylus CSS αξίζει να τις ελέγξετε.