Τρόπος χρήσης συναρτήσεων σε λιγότερο CSS

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

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

Τι είναι οι λειτουργίες και γιατί είναι σημαντικές;

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

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

λειτουργίαέλεγχος Έκπτωση(τιμή, όριο){
αν (τιμή >= όριο){
αφήνω έκπτωση = 5/100 * τιμή?
ΕΠΙΣΤΡΟΦΗ`Η έκπτωση σας είναι $${έκπτωση}`;
 } αλλού {
ΕΠΙΣΤΡΟΦΗ`Λυπούμαστε, αυτό το προϊόν δεν πληροί τις προϋποθέσεις για έκπτωση. `
 }
}

Στη συνέχεια, μπορείτε να καλέσετε τη συνάρτηση και να περάσετε στο τιμή και το κατώφλι.

αφήνω τιμή = προτροπή("Πληκτρολογήστε την τιμή του προϊόντος:")
ειδοποίηση (έλεγχος Έκπτωση (τιμή, 500))

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

Κατανόηση συναρτήσεων σε λιγότερο CSS

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

Π{
χρώμα του φόντου: το κόκκινο;
πλάτος: υπολογ(13px- 4px);
}

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

@πλάτος: 10 εικονοστοιχεία;
@ύψος: 20 εικονοστοιχεία;
div{
περιθώριο:αν((@πλάτος > @ύψος), 10 εικονοστοιχεία, 20 εικονοστοιχεία)
}

Στο μπλοκ κώδικα παραπάνω, ο μεταγλωττιστής Less ελέγχει εάν η μεταβλητή πλάτος (ορίζεται από το @ σύμβολο) είναι μεγαλύτερη από τη μεταβλητή ύψος. Εάν η συνθήκη είναι αληθής, η συνάρτηση επιστρέφει την πρώτη τιμή μετά τη συνθήκη (10 px). Διαφορετικά, η συνάρτηση επιστρέφει τη δεύτερη τιμή (20 px).

Μετά τη μεταγλώττιση, η έξοδος CSS θα πρέπει να μοιάζει κάπως έτσι:

div {
περιθώριο: 20px;
}

Πώς να χρησιμοποιήσετε ένα Boolean σε λιγότερο

Boolean είναι μια μεταβλητή που έχει δύο πιθανές τιμές: αληθής ή ψευδής. Με την boolean () συνάρτηση στο Less, μπορείτε να αποθηκεύσετε την τιμή true ή false μιας έκφρασης σε μια μεταβλητή για μελλοντική χρήση. Ετσι δουλευει.

@χρώμα κειμένου: το κόκκινο;
@bg-color: boolean(@text-color = red);

Στο μπλοκ κώδικα παραπάνω, ο μεταγλωττιστής Less ελέγχει εάν χρώμα κειμένου είναι κόκκινο. Μετά το bg-χρώμα μεταβλητή αποθηκεύει την τιμή.

div{
χρώμα του φόντου: αν(@bg-color,πράσινο κίτρινο);
}

Το μπλοκ κώδικα παραπάνω μεταγλωττίζεται σε κάτι σαν αυτό:

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

Αντικατάσταση κειμένου εντός συμβολοσειράς με τη συνάρτηση replace().

Η σύνταξη για το αντικαθιστώ() η λειτουργία μοιάζει με αυτό:

αντικαθιστώ(σειρά, πρότυπο, αντικατάσταση, σημαίες)

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

Προαιρετικά, το αντικαθιστώ() η συνάρτηση μπορεί επίσης να περιέχει το σημαίες παράμετρος για σημαίες κανονικής έκφρασης.

@σειρά: "Γειά σου";
@πρότυπο: "γεια";
@αντικατάσταση: "Εγώ";
div::πριν{
περιεχόμενο: αντικαθιστώ(@σειρά,@πρότυπο,@αντικατάσταση)
}

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

div::πριν {
περιεχόμενο: "γεια";
}

Λίστα συναρτήσεων σε λιγότερο CSS

Στο Less CSS, χρησιμοποιείτε κόμματα ή κενά για να ορίσετε μια λίστα τιμών. Για παράδειγμα:

@είδη παντοπωλείου: "ψωμί", "μπανάνα", "πατάτα", "γάλα";

Μπορείτε να χρησιμοποιήσετε το μήκος() λειτουργία για την αξιολόγηση του αριθμού των στοιχείων στη λίστα.

@αποτέλεσμα: μήκος(@groceries);

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

@τρίτο στοιχείο: εκχύλισμα(@groceries, 3);

Σε αντίθεση με τις κανονικές γλώσσες προγραμματισμού όπου το ευρετήριο λίστας ξεκινά από 0, ο δείκτης έναρξης μιας λίστας στο Less CSS είναι πάντα 1.

Μια άλλη λειτουργία λίστας που θα μπορούσε να είναι χρήσιμη κατά τη δημιουργία ιστοτόπων με Less είναι η εύρος() λειτουργία. Χρειάζεται σε τρεις παραμέτρους. Η πρώτη παράμετρος καθορίζει τη θέση εκκίνησης στην περιοχή. Η δεύτερη παράμετρος υποδεικνύει την τελική θέση και η τελευταία παράμετρος καθορίζει την τιμή αύξησης ή μείωσης μεταξύ κάθε στοιχείου της περιοχής. Εάν δεν παρέχεται, η προεπιλεγμένη τιμή είναι 1.

div {
 περιθώριο: εύρος (10px, 40px, 10);
}

Το μπλοκ κώδικα παραπάνω θα πρέπει να μεταγλωττιστεί ως εξής:

div {
 περιθώριο: 10px 20px 30px 40px;
}

Όπως μπορείτε να δείτε, ο μεταγλωττιστής Less CSS ξεκινά από 10px, αυξάνοντας την προηγούμενη τιμή κατά 10, μέχρι να φτάσει στην τελική θέση (40px).

Δημιουργία ενός απλού ιστότοπου με λιγότερες λειτουργίες CSS

Ήρθε η ώρα να συγκεντρώσετε όλα όσα έχετε μάθει και να δημιουργήσετε ένα απλό έργο με Less CSS. Δημιουργήστε ένα φάκελο και προσθέστε ευρετήριο.htm και στυλ.λιγότερο αρχεία.

Ανοιξε το ευρετήριο.htm αρχείο και προσθέστε τον ακόλουθο κώδικα HTML.

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<Σύνδεσμοςσχετ="φύλλο στυλ/λιγότερο"τύπος="κείμενο/css"href="style.less" />
<τίτλος>Εγγραφοτίτλος>
κεφάλι>
<σώμα>
<divτάξη="δοχείο">
<h1>
h1>
div>
<γραφήsrc=" https://cdn.jsdelivr.net/npm/less" >γραφή>
σώμα>
html>

Στο μπλοκ κώδικα παραπάνω, υπάρχει ένας γονέας "δοχείο"div με ένα άδειο h1 στοιχείο. ο src χαρακτηριστικό στο γραφή Η ετικέτα δείχνει τη διαδρομή προς τον μεταγλωττιστή Less CSS.

ΧΩΡΙΣ αυτο γραφή ετικέτα, το πρόγραμμα περιήγησης δεν θα μπορεί να κατανοήσει τον κώδικά σας. Εναλλακτικά, μπορείτε να εγκαταστήσετε το Less CSS στον υπολογιστή σας μέσω Node Package Manager (NPM), εκτελώντας την ακόλουθη εντολή στο τερματικό:

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

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

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

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

@container-width: 50 εκ;
@container-bg-color: κίτρινο;

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

@σειρά: "Γεια σας από τα παιδιά του πλανήτη Γη!";
@πρότυπο: "Παιδιά του πλανήτη Γη!";
@αντικατάσταση: "κάτοικοι του Πλούτωνα!";
.δοχείο{
πλάτος: @container-width;
χρώμα του φόντου: @container-bg-color;
υλικό παραγεμίσματος: αν(@container-width > 30 εκ, εύρος(20 εικονοστοιχεία, 80 εικονοστοιχεία, 20),"");
σύνορο: στερεός;
}
h1:πρώτο παιδί::μετά{
περιεχόμενο: αντικαθιστώ(@σειρά,@πρότυπο,@αντικατάσταση);
}

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

.δοχείο {
πλάτος: 50rem;
χρώμα του φόντου: κίτρινος;
υλικό παραγεμίσματος: 20px 40px 60px 80px;
σύνορο: στερεός;
}
h1:πρώτο παιδί::μετά {
περιεχόμενο: "Γειά σουαπόοκάτοικοιτουΠλούτων!";
}

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

Βελτιώστε την παραγωγικότητά σας με προεπεξεργαστές CSS

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

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