Μπορεί να είστε πιο εξοικειωμένοι με άλλους προεπεξεργαστές CSS, αλλά μην αγνοήσετε αυτόν τον υποψήφιο.

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

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

Τι είναι ένας προεπεξεργαστής CSS;

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

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

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

instagram viewer
Προεπεξεργαστές CSS όπως το LessCSS στο έργο σας.

Πώς λειτουργεί το Stylus CSS

Για να εγκαταστήσετε το Stylus στο τοπικό σας περιβάλλον, χρειάζεστε το Node.js και ένα από τα δύο Node Package Manager (NPM) ή Νήματα εγκατεστημένα στο μηχάνημά σας. Εκτελέστε την ακόλουθη εντολή τερματικού:

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

Ή:

νήμα προσθέστε γραφίδα

Κάθε αρχείο Stylus CSS τελειώνει σε α .στυλ επέκταση. Αφού γράψετε τον κώδικα Stylus CSS, μπορείτε να τον μεταγλωττίσετε με αυτήν την εντολή:

γραφίδα .

Αυτό θα πρέπει να συγκεντρώνει όλα τα .στυλ αρχεία και έξοδο .css αρχεία στον τρέχοντα κατάλογο. Ο μεταγλωττιστής Stylus καθιστά επίσης δυνατή τη μεταγλώττιση .css αρχεία σε .στυλ με την --css σημαία. Για να μετατρέψετε ένα .css αρχείο στο .στυλ format, χρησιμοποιήστε αυτήν την εντολή:

γραφίδα --css style.css style.styl

Σύνταξη και γονικοί επιλογείς στο Stylus CSS

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

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

.δοχείο
περιθώριο: 10px

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

.δοχείο {
περιθώριο: 10px;
}

Ακριβώς όπως στους προεπεξεργαστές CSS όπως το Less, μπορείτε να αναφέρετε έναν γονικό επιλογέα με το & χαρακτήρας:

κουμπί
χρώμα: άσπρο;
 &:φτερουγίζω
χρώμα: κίτρινος;

Το οποίο μεταγλωττίζεται σε:

κουμπί {
χρώμα: #fff;
}
κουμπί:φτερουγίζω {
χρώμα: #ff0;
}

Τρόπος χρήσης μεταβλητών στο Stylus CSS

Σε προεπεξεργαστές CSS όπως το Less CSS, ορίζετε μεταβλητές με το @ χαρακτήρας, ενώ το παραδοσιακό CSS χρησιμοποιεί το "--" για να ορίσει μια μεταβλητή.

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

bg-χρώμα = μαύρος

Τώρα μπορείτε να χρησιμοποιήσετε τη μεταβλητή στο .στυλ αρχείο σαν αυτό:

div
χρώμα του φόντου: bg-χρώμα

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

div {
χρώμα του φόντου: #000;
}

Μπορείτε να ορίσετε μια μηδενική μεταβλητή με παρενθέσεις. Για παράδειγμα:

άδεια-μεταβλητή = ()

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

στοιχείο-πλάτος = 563px
div
πλάτος: στοιχείο-πλάτος
ύψος: (στοιχείο-πλάτος / 2)

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

div
πλάτος: 563px
ύψος: (@πλάτος / 2)

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

div {
πλάτος: 563px;
ύψος: 281.5 εικονοστοιχεία;
}

Λειτουργίες στο Stylus CSS

Μπορείτε να δημιουργήσετε συναρτήσεις που επιστρέφουν τιμές στο Stylus CSS. Ας υποθέσουμε ότι θέλετε να ρυθμίσετε το στοίχιση κειμένου ιδιότητα ενός div στο "κέντρο" εάν το πλάτος είναι μεγαλύτερο από 400 εικονοστοιχεία ή "αριστερό" εάν το πλάτος είναι μικρότερο από 400 px. Μπορείτε να δημιουργήσετε μια συνάρτηση που χειρίζεται αυτή τη λογική.

alignCenter(n)
αν (n > 400)
 'κέντρο'
αλλούαν (n < 200)
 'αριστερά'
div {
πλάτος: 563px
στοίχιση κειμένου: alignCenter(@πλάτος)
ύψος: (@πλάτος / 2)
}

Αυτό το μπλοκ κώδικα καλεί το alignCenter λειτουργία, περνώντας το πλάτος αξία ακινήτου αναφέροντάς το με το @ σύμβολο. ο alignCenter η συνάρτηση ελέγχει εάν η παράμετρός της, n, είναι μεγαλύτερο από 400 και επιστρέφει "κέντρο" αν είναι. Αν n είναι μικρότερη από 200, η ​​συνάρτηση επιστρέφει "αριστερά".

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

div {
πλάτος: 563px;
στοίχιση κειμένου: 'κέντρο';
ύψος: 281.5 εικονοστοιχεία;
}

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

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

αφαιρώ(σι: 30 px, ένα: 10 px)/*-20px*/

Πότε να χρησιμοποιήσετε έναν προεπεξεργαστή CSS

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

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