Όσον αφορά την ανάπτυξη ιστού, ο πιο συνηθισμένος τρόπος για το στυλ μιας εφαρμογής είναι η χρήση CSS. Ωστόσο, η εργασία με το CSS μπορεί να είναι δυσκίνητη, επειδή είναι εμφανώς δύσκολο να εντοπιστεί σφάλματα.
Μάθετε πώς να χρησιμοποιείτε το Stylus CSS και θα έχετε μια άλλη επιλογή, με έναν από τους πιο δημοφιλείς διαθέσιμους προεπεξεργαστές CSS.
Πίνακας περιεχομένων
Τι είναι ένας προεπεξεργαστής CSS;
Οι προεπεξεργαστές CSS είναι βοηθητικά προγράμματα που διευκολύνουν τη σύνταξη CSS. Συχνά μεταγλωττίζουν κώδικα από τη δική τους προσαρμοσμένη σύνταξη στη μορφή .css που μπορούν να κατανοήσουν τα προγράμματα περιήγησης.
Οι προεπεξεργαστές CSS όπως το Sass, για παράδειγμα, προσφέρουν ειδικές δυνατότητες όπως βρόχους, μίξεις, ένθετους επιλογείς και δηλώσεις if/else. Αυτές οι δυνατότητες διευκολύνουν τη διατήρηση του κώδικα CSS, ειδικά σε μεγάλες ομάδες.
Για να χρησιμοποιήσετε έναν επεξεργαστή CSS, πρέπει να εγκαταστήσετε τον μεταγλωττιστή στο τοπικό σας περιβάλλον ή/και διακομιστή παραγωγής. Ορισμένα εργαλεία δημιουργίας frontend, όπως το Vite, σας επιτρέπουν να συμπεριλάβετε στο έργο σας προεπεξεργαστές CSS όπως το LessCSS.
Πώς λειτουργεί το Stylus CSS
Για να εγκαταστήσετε το Stylus στο τοπικό σας περιβάλλον, χρειάζεστε Node.js και είτε Node Package Manager (NPM) είτε Yarn εγκατεστημένο στον υπολογιστή σας. Εκτελέστε την ακόλουθη εντολή τερματικού:
npm install stylus
Ή:
yarn add stylus
Κάθε αρχείο Stylus CSS τελειώνει σε μια επέκταση .styl. Αφού γράψετε τον κώδικα Stylus CSS, μπορείτε να τον μεταγλωττίσετε με αυτήν την εντολή:
stylus .
Αυτό θα πρέπει να μεταγλωττίσει όλα τα αρχεία .styl και να εξάγει αρχεία .css στον τρέχοντα κατάλογο. Ο μεταγλωττιστής Stylus καθιστά επίσης δυνατή τη μεταγλώττιση αρχείων .css σε .styl με τη σημαία –css. Για να μετατρέψετε ένα αρχείο .css σε μορφή .styl, χρησιμοποιήστε αυτήν την εντολή:
stylus --css style.css style.styl
Σύνταξη και γονικοί επιλογείς στο Stylus CSS
Στο παραδοσιακό CSS, ορίζετε ένα μπλοκ στυλ με άγκιστρα. Η αποτυχία συμπερίληψης αυτών των χαρακτήρων θα οδηγήσει σε σπασμένα στυλ. Στο Stylus CSS, η χρήση αγκύλων είναι προαιρετική.
Η γραφίδα υποστηρίζει μια σύνταξη που μοιάζει με Python, που σημαίνει ότι μπορείτε να ορίσετε μπλοκ χρησιμοποιώντας εσοχές, όπως αυτό:
.container
margin: 10px
Το παραπάνω μπλοκ κώδικα μεταγλωττίζεται στο ακόλουθο CSS:
.container {
margin: 10px;
}
Ακριβώς όπως στους προεπεξεργαστές CSS όπως το Less, μπορείτε να αναφέρετε έναν γονικό επιλογέα με το χαρακτήρα &:
button
color: white;
&:hover
color: yellow;
Το οποίο μεταγλωττίζεται σε:
button {
color: #fff;
}button:hover {
color: #ff0;
}
Τρόπος χρήσης μεταβλητών στο Stylus CSS
Σε προεπεξεργαστές CSS όπως το Less CSS, ορίζετε μεταβλητές με τον χαρακτήρα @, ενώ το παραδοσιακό CSS χρησιμοποιεί το «–» για να ορίσει μια μεταβλητή.
Στο Stylus, τα πράγματα είναι κάπως διαφορετικά: δεν χρειάζεστε ειδικό σύμβολο για να ορίσετε μια μεταβλητή. Αντίθετα, απλώς ορίστε τη μεταβλητή χρησιμοποιώντας ένα σύμβολο ίσου (=) για να τη συνδέσετε σε μια τιμή:
bg-color = black
Τώρα μπορείτε να χρησιμοποιήσετε τη μεταβλητή στο αρχείο .styl ως εξής:
div
background-color: bg-color
Τα μπλοκ κώδικα παραπάνω μεταγλωττίζονται στο ακόλουθο CSS:
div {
background-color: #000;
}
Μπορείτε να ορίσετε μια μηδενική μεταβλητή με παρενθέσεις. Για παράδειγμα:
empty-variable = ()
Μπορείτε να αναφέρετε άλλες τιμές ιδιοτήτων χρησιμοποιώντας το σύμβολο @. Για παράδειγμα, εάν θέλετε να ορίσετε το ύψος ενός div στο μισό του πλάτους του, μπορείτε να κάνετε τα εξής:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Αυτό θα λειτουργούσε, αλλά μπορείτε επίσης να αποφύγετε τη δημιουργία της μεταβλητής εντελώς και να αναφέρετε την τιμή της ιδιότητας πλάτους:
div
width: 563px
height: (@width / 2)
Σε αυτό το μπλοκ κώδικα, το σύμβολο @ σάς επιτρέπει να αναφέρετε την ιδιότητα πραγματικού πλάτους στο div. Ανεξάρτητα από την προσέγγιση που θα επιλέξετε, όταν μεταγλωττίζετε το αρχείο .styl, θα πρέπει να λαμβάνετε το ακόλουθο CSS:
div {
width: 563px;
height: 281.5px;
}
Λειτουργίες στο Stylus CSS
Μπορείτε να δημιουργήσετε συναρτήσεις που επιστρέφουν τιμές στο Stylus CSS. Ας υποθέσουμε ότι θέλετε να ορίσετε την ιδιότητα στοίχισης κειμένου ενός div σε “κέντρο” εάν το πλάτος είναι μεγαλύτερο από 400 εικονοστοιχεία ή “αριστερά” εάν το πλάτος είναι μικρότερο από 400 εικονοστοιχεία. Μπορείτε να δημιουργήσετε μια συνάρτηση που χειρίζεται αυτή τη λογική.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Αυτό το μπλοκ κώδικα καλεί τη συνάρτηση alignCenter, μεταβιβάζοντας την τιμή της ιδιότητας πλάτους αναφέροντάς της με το σύμβολο @. Η συνάρτηση alignCenter ελέγχει εάν η παράμετρός της, n, είναι μεγαλύτερη από 400 και επιστρέφει “κέντρο” εάν είναι. Εάν το n είναι μικρότερο από 200, η συνάρτηση επιστρέφει “αριστερά”.
Όταν εκτελείται ο μεταγλωττιστής, θα πρέπει να παράγει την ακόλουθη έξοδο:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
Στις περισσότερες γλώσσες προγραμματισμού, οι συναρτήσεις εκχωρούν παραμέτρους με βάση τη σειρά με την οποία τις παρέχετε. Αυτό μπορεί να οδηγήσει σε λάθη ως αποτέλεσμα της μετάδοσης παραμέτρων με λάθος σειρά, η οποία είναι πιο πιθανό όσο περισσότερες παραμέτρους πρέπει να περάσετε.
Η γραφίδα παρέχει μια λύση: ονομασμένες παράμετροι. Χρησιμοποιήστε τις αντί για ταξινομημένες παραμέτρους όταν καλείτε μια συνάρτηση, όπως αυτό:
subtract(b:30px, a:10px)
Πότε να χρησιμοποιήσετε έναν προεπεξεργαστή CSS
Οι προεπεξεργαστές CSS είναι πολύ ισχυρά βοηθητικά προγράμματα που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε τη ροή εργασίας σας. Η επιλογή του σωστού εργαλείου για το έργο σας μπορεί να συμβάλει στη βελτίωση της παραγωγικότητάς σας. Εάν το έργο σας χρειάζεται μόνο μια μικρή ποσότητα CSS, τότε η χρήση ενός προεπεξεργαστή CSS μπορεί να είναι υπερβολική.
Εάν χτίζετε ένα μεγάλο έργο, ίσως ως μέρος μιας ομάδας, που βασίζεται σε ένα τεράστιο ποσό CSS, σκεφτείτε να χρησιμοποιήσετε έναν προεπεξεργαστή. Προσφέρουν λειτουργίες όπως λειτουργίες, βρόχους και μίξεις που διευκολύνουν το στυλ σύνθετων έργων.