Το Stylus είναι ένας προεπεξεργαστής κώδικα CSS , ο οποίος μας επιτρέπει να εργαζόμαστε πιο εύκολα στον επεξεργαστή κειμένου μας και παρακάτω θα εξηγήσω τους λόγους για τη δήλωσή μου.
Αυτό είναι ένα φύλλο στυλ όπως το γνωρίζουμε:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; ακτίνα περιγράμματος: 5px; }
Και αυτό θα ήταν το ίδιο φύλλο στυλ που δημιουργήθηκε με το Stylus:
γραμματοσειρά σώματος 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Πού είναι τα πλήκτρα; Πού πήγαν τα ερωτηματικά και οι άνω και κάτω τελείες; Η Λήθη. Η Γραφίδα το κάνει αυτό για εμάς.
Αν μόλις ξεκινάτε με CSS και HTML, η χρήση Stylus δεν συνιστάται απλώς επειδή μπορεί να ξεχάσετε πώς λειτουργούν τα πράγματα στην πραγματικότητα. Αλλά αν ασχολείστε με αυτόν τον τομέα εδώ και καιρό και θέλετε να εξοικονομήσετε κώδικα και κόπο... κάντε το.
Οι προγραμματιστές Python θα βρουν στο Stylus κάτι πολύ παρόμοιο με αυτό που έχουν συνηθίσει, καθώς το μόνο που χρειάζεται είναι να κάνουν σωστή εσοχή για να συμβεί η μαγεία.
εγκατάσταση
Για να λειτουργήσει το Stylus , πρέπει να εγκαταστήσουμε το Node.js, το οποίο βρίσκεται στον κλάδο Community, οπότε προχωράμε ως εξής:
$ sudo pacman -S nodejs
Και αργότερα εγκαθιστούμε το Stylus. Ο παραδοσιακός τρόπος θα ήταν:
$ npm install -g stylus
Εγκαθιστά ωραία, αλλά δεν λειτουργεί για μένα, οπότε είναι πολύ πιο εύκολο να εγκατασταθεί από το AUR:
$ yaourt -S nodejs-stylus
Πώς να χρησιμοποιήσετε το Stylus
Εντάξει, έχουμε εγκατεστημένα τα Node.js και Stylus . Πώς τα χρησιμοποιούμε; Είναι απλό. Ας υποθέσουμε ότι έχουμε έναν κατάλογο με τα ακόλουθα αρχεία:
- dir - index.html - style.css
Αυτό που χρειάζεται να κάνουμε είναι να δημιουργήσουμε το αρχείο style.styl , με το οποίο θα δουλέψουμε. Σε αυτό το αρχείο, μπορούμε να έχουμε κάτι σαν:
χρώμα φόντου σώματος #ffff μέγεθος γραμματοσειράς 12 εικονοστοιχεία α. κουμπί χρώματος κόκκινη επένδυση 10 εικονοστοιχεία
Αν αποθηκεύσουμε ή κάνουμε οποιεσδήποτε αλλαγές, δεν συμβαίνει τίποτα, επειδή δεν "μεταγλωττίζουμε" το αρχείο μας. Για να το μεταγλωττίσουμε, ανοίγουμε ένα τερματικό στον κατάλογό μας (όπου βρίσκεται το αρχείο style.styl ) και εκτελούμε:
stylus -c style.styl
Αλλά κάθε φορά που αποθηκεύουμε το αρχείο style.styl , θα πρέπει να εκτελέσουμε τον κώδικα, αλλά ευτυχώς αυτό δεν είναι απαραίτητο, επειδή αν εκτελέσουμε την ίδια εντολή, αλλά προσθέτοντας την παράμετρο -w (watch), συμβαίνουν τα εξής:
stylus -c -w style.styl menonton /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css παρακολουθώντας style.styl compiled style.css compiled style.css
Με άλλα λόγια, το αρχείο συντάσσεται αυτόματα .. Θα ήταν το αποτέλεσμα;
body {background-color: #fff; font-size: 12px} a.button {color: # f00; παραγέμισμα: 10px}
Όπως μπορείτε να δείτε, όχι μόνο δημιουργεί τον κώδικα CSS μας , αλλά και αφαιρεί τα περιττά κενά, έτσι ώστε το φύλλο στυλ μας να έχει μικρότερο βάρος
Όχι μόνο αυτό, το Stylus μας επιτρέπει να μετατρέπουμε αρχεία CSS στη μορφή του, και οι τρόποι με τους οποίους μπορούμε να χρησιμοποιήσουμε τη σύνταξή του είναι απίστευτα ποικίλοι. Και αυτή είναι μόνο μια γεύση. Αν λοιπόν ενδιαφέρεστε, σας ενθαρρύνω να μάθετε περισσότερα για το Stylus.