Ένας απλός και εύκολος οδηγός για να καταλάβετε το Sass
Πριν από λίγο καιρό ο Thoriq Firdaus έγραψε ένα μεγάλο άρθρο για να ξεκινήσει με το Sass που σας έδειξε πώς να εγκαταστήσετε και να χρησιμοποιήσετε αυτήν την πολύ χρήσιμη γλώσσα προεπεξεργαστή CSS (ίσως να θέλετε να το ελέγξετε έξω, ξέρετε, για να ξεκινήσετε).
Σε αυτό το άρθρο σκέφτηκα ότι θα σας δώσω λίγο περισσότερη εικόνα για το τι μπορείτε να κάνετε με το Sass και πώς οι προγραμματιστές το χρησιμοποιούν καθημερινά για να δημιουργήσουν έναν καλύτερο και πιο αρθρωτό κώδικα CSS. Περάστε μπροστά στην ενότητα που θέλετε:
- Εργαλεία Εμπορίου
- Μεταβλητές
- Φωτισμός
- Επέκταση των κανόνων
- Mixins
- Επιλογείς επιλογής θέσης
- Λειτουργίες
- Λειτουργίες
Εργαλεία Εμπορίου
Ο Thoriq σας έδειξε πώς μπορείτε να χρησιμοποιήσετε το Sass από τη γραμμή εντολών χρησιμοποιώντας το sass - παρακολουθήστε εντολή.
Αν προτιμάτε τα εργαλεία GUI, μπορείτε να πάτε με την προσωπική μου αγαπημένη εφαρμογή, το Codekit, ένα εργαλείο προγραμματιστή ιστού για τη σύνταξη του Sass, τη συγκόλληση, την αυτόματη προπόνηση και πολλά άλλα. Ο Prepros είναι μια άλλη πολύ ικανή εφαρμογή που μπορεί να χρησιμοποιηθεί σε όλα τα συστήματα. Και οι δύο είναι πληρωμένες αιτήσεις αλλά αξίζουν καλά αν τα χρησιμοποιείτε μακροπρόθεσμα.
Αν απλά θέλετε να δοκιμάσετε το Sass χωρίς να πληρώνουν για τίποτα μπορείτε να χρησιμοποιήσετε το τερματικό, ή το Koala (εδώ είναι η αναθεώρησή μας), μια δωρεάν εφαρμογή πολλαπλών λειτουργιών που είναι πλούσια σε πλούσια πλατφόρμα, η οποία μπορεί να κρατήσει το έδαφος έναντι των ομολόγων premium.
Μεταβλητές
Ένα από τα πρώτα πράγματα που θα χρειαστεί να τυλίξετε το κεφάλι σας είναι μεταβλητές. Εάν προέρχεστε από PHP ή άλλα παρόμοια γλώσσα κωδικοποίησης, αυτή θα είναι η δεύτερη φύση για εσάς. Οι μεταβλητές είναι για αποθηκεύοντας κομμάτια επαναχρησιμοποιήσιμων πληροφοριών, όπως μια τιμή χρώματος για παράδειγμα:
$ primary_color: # 666666; .button χρώμα: $ primary_color; .σημαντικό χρώμα: $ πρωτεύον χρώμα;
Αυτό μπορεί να μην φαίνεται ότι είναι χρήσιμο εδώ, αλλά φανταστείτε να έχετε 3.000 γραμμές κώδικα. Αν αλλάξετε το χρώμα σας, θα χρειαστεί να αντικαταστήσετε κάθε τιμή χρώματος στο CSS. Με το Sass μπορείτε απλά τροποποιήστε την τιμή απο $ primary_color μεταβλητή και να γίνει με αυτό.
Μεταβλητές χρησιμοποιούνται για την αποθήκευση ονομάτων γραμματοσειρών, μεγεθών, χρωμάτων και πλήθους άλλων πληροφοριών. Για μεγαλύτερα έργα αξίζει να αφαιρέσουμε όλες τις μεταβλητές σας σε ξεχωριστό αρχείο (θα ρίξουμε μια ματιά στο πώς θα γίνει αυτό σύντομα). Αυτό που σας επιτρέπει να κάνετε είναι να αναμορφώσετε ολόκληρο το έργο σας και να αλλάξετε τις γραμματοσειρές και άλλες βασικές πτυχές χωρίς ποτέ να αγγίζετε τους ισχύοντες κανόνες CSS. Το μόνο που χρειάζεται να κάνετε είναι να τροποποιήσετε μερικές μεταβλητές.
Φωτισμός
Ένα άλλο βασικό χαρακτηριστικό που σας δίνει η Sass είναι την ικανότητα να φωλιάζουν κανόνες. Ας υποθέσουμε ότι δημιουργείτε ένα μενού πλοήγησης. Εχετε ένα nav στοιχείο που περιέχει μια λίστα με μη ταξινομημένα στοιχεία, στοιχεία καταλόγου και συνδέσμους. Στο CSS μπορείτε να κάνετε κάτι τέτοιο:
#header nav / * Κανόνες για την περιοχή επίσκεψης * / #header nav ul / * Κανόνες για το μενού * / #header nav li / * Κανόνες για στοιχεία λίστας * / #header nav a / * για συνδέσμους * /
Στους επιλογείς, επαναλαμβάνουμε τον εαυτό μας πολύ. Αν τα στοιχεία έχουν κοινές ρίζες, μπορούμε να χρησιμοποιήσουμε τη φωλιά γράψτε τους κανόνες μας με πολύ πιο καθαρό τρόπο.
Ακολουθεί ο τρόπος με τον οποίο ο παραπάνω κώδικας θα μπορούσε να δούμε στο Sass:
#header nav / * Κανόνες για την περιοχή περιήγησης * / ul / * Κανόνες για το μενού * / li / * Κανόνες για στοιχεία λίστας * / a / * Κανόνες για συνδέσμους * /
Η φύτευση είναι εξαιρετικά χρήσιμη γιατί κάνει τα φύλλα στυλ (πολύ) πιο ευανάγνωστα. Χρησιμοποιώντας τη φωλιά μαζί με την κατάλληλη εσοχή μπορείτε να επιτύχετε πολύ ευανάγνωστες δομές κώδικα, ακόμα κι αν έχετε ένα δίκαιο ποσό κώδικα.
Ένα μειονέκτημα της φωλεοποίησης είναι ότι μπορεί οδηγούν σε περιττή εξειδίκευση. Στο παραπάνω παράδειγμα έχω αναφερθεί σε συνδέσμους με #header nav α. Θα μπορούσατε επίσης να χρησιμοποιήσετε #header nav ul a li που θα ήταν πιθανώς πάρα πολύ.
Στο Sass, είναι πολύ πιο εύκολο να είστε πολύ συγκεκριμένοι, αφού το μόνο που χρειάζεται να κάνετε είναι να φτιάξετε τους κανόνες σας. Τα παρακάτω είναι πολύ λιγότερο ευανάγνωστα και αρκετά συγκεκριμένα.
#header nav / * Κανόνες για την περιοχή περιήγησης * / ul / * Κανόνες για το μενού * / li / * Κανόνες για στοιχεία λίστας * / a / * Κανόνες για συνδέσμους * /
Επέκταση των κανόνων
Η επέκταση θα είναι γνωστή αν έχετε εργαστεί με αντικειμενοστρεφείς γλώσσες. Είναι καλύτερα κατανοητό μέσω ενός παραδείγματος, ας δημιουργήσουμε 3 κουμπιά που είναι μικρές παραλλαγές μεταξύ τους.
.κουμπί εμφάνιση: inline-block; χρώμα: # 000; φόντο: # 333; ακτίνα ακτίνας: 4px; padding: 8px 11px; .button-primary @extend .button; φόντο: # 0091C2 .button-small @extend .button; μέγεθος γραμματοσειράς: 0,9em; padding: 3px 8px;
ο .κουμπί-πρωτεύον και .κουμπί-μικρό όλες οι κατηγορίες επεκτείνουν το .κουμπί class που σημαίνει ότι αναλαμβάνουν όλες τις ιδιότητές του και στη συνέχεια καθορίζουν τις δικές τους.
Αυτό είναι εξαιρετικά χρήσιμο σε πολλές περιπτώσεις όπου μπορούν να χρησιμοποιηθούν παραλλαγές ενός στοιχείου. Τα μηνύματα (συναγερμός / επιτυχία / σφάλμα), κουμπιά (χρώματα, μεγέθη), τύποι μενού κ.ο.κ. θα μπορούσαν όλοι να χρησιμοποιήσουν την επέκταση της λειτουργικότητας για μεγάλη απόδοση CSS.
Μία προειδοποίηση επεκτείνεται είναι αυτή δεν θα λειτουργούν σε ερωτήματα μέσων όπως θα περίμενε κανείς. Αυτό είναι λίγο πιο προηγμένο, αλλά μπορείτε να διαβάσετε τα πάντα για αυτή τη συμπεριφορά στην επιλογή επιλογείς επιλογής θέσης - οι επιλογές επιλογής θέσης είναι ένα είδος ειδικής έκτασης για το οποίο θα μιλήσουμε σύντομα.
Mixins
Τα Mixins είναι ένα άλλο αγαπημένο χαρακτηριστικό των χρηστών του preprocessor. Τα Mixins είναι επαναχρησιμοποιήσιμα σύνολα κανόνων - ιδανικά για κανόνες που αφορούν συγκεκριμένους πωλητές ή για σύντομους κανόνες CSS.
Πώς να δημιουργήσετε έναν κανόνα μετάβασης για τα στοιχεία του hover:
@mixing hover-effect -webkit-transition: χρώμα φόντου 200ms; -moz-transition: χρώμα φόντου 200ms; -o-μετάβαση: χρώμα φόντου 200ms; μετάβαση: χρώμα φόντου 200ms; ένα @include hover-effect; .button @include hover-effect;
Τα Mixins σας επιτρέπουν επίσης να χρησιμοποιήσετε μεταβλητές σε καθορίστε τις τιμές μέσα στο mixin. Θα μπορούσαμε να ξαναγράψουμε το παραπάνω παράδειγμα στο μας δίνει τον έλεγχο του ακριβούς χρόνου της μετάβασης. Μπορούμε να θέλουμε τα κουμπιά να μεταβαίνουν ένα μικρό κομμάτι πιο αργό για παράδειγμα.
@mixin hover-effect ($ ταχύτητα) -webkit-transition: background-color $ speed; -moz-transition: background-color $ speed? -ο-μετάβαση: χρώμα-φόντο $ ταχύτητα? μετάβαση: φόντο-χρώμα $ ταχύτητα? @include hover-effect (200ms). .button @include hover-effect (300ms);
Επιλογείς επιλογής θέσης
Οι επιλογές επιλογής τοποθετήθηκαν με το Sass 3.2 και λύνουν ένα πρόβλημα το οποίο θα μπορούσε να προκαλέσει μια κάμψη στον δημιουργημένο σας κώδικα CSS. Ρίξτε μια ματιά σε αυτόν τον κώδικα που δημιουργεί μηνύματα σφάλματος:
.μήνυμα font-size: 1.1em; padding: 11px; πλάτος συνόρου: 1px; μεθοδικό στυλ: συμπαγές; . μηνύματος-κινδύνου @extend .message; φόντο: # C20030; χρώμα: #fff; border-color: # A8002A; .μηνύματα-επιτυχία @extend .message; φόντο: # 7EA800; χρώμα: #fff; border-color: # 6B8F00;
Είναι πολύ πιθανό ότι η κλάση μηνύματος δεν θα χρησιμοποιηθεί ποτέ στην HTML μας: έχει δημιουργήθηκε για να επεκταθεί, δεν χρησιμοποιείται ως έχει. Αυτό προκαλεί λίγο πρήξιμο στο CSS που δημιουργείτε. Για να καταστήσετε τον κώδικα πιο αποδοτικό, μπορείτε να χρησιμοποιήσετε τον επιλογέα επιλογής σύμβολα που υποδεικνύεται με ένα ποσοστό:
% μήνυμα font-size: 1.1em; padding: 11px; πλάτος συνόρου: 1px; μεθοδικό στυλ: συμπαγές; . μηνύματος-κινδύνου @extend% button; φόντο: # C20030; χρώμα: #fff; border-color: # A8002A; .Μεταφορά-επιτυχία @extend% button; φόντο: # 7EA800; χρώμα: #fff; Χρώμα περιγράμματος: # 6D9700;
Σε αυτό το στάδιο μπορεί να αναρωτιέστε ποια είναι η διαφορά μεταξύ των επεκτάσεων και των mixins. Αν χρησιμοποιείτε τοποθετημένα σύμβολα, συμπεριφέρονται σαν ένας συνδυασμός χωρίς παράμετρο. Αυτό ισχύει, αλλά η έξοδος σε CSS διαφέρει. Η διαφορά είναι αυτή mixins διπλός κανόνες ενώ οι εντολείς θέσης θα διασφαλίσουν ότι οι ίδιοι κανόνες μοιράζονται τους επιλογείς, με αποτέλεσμα λιγότερα CSS στο τέλος.
Λειτουργίες
Είναι δύσκολο να αντισταθείς στη λέσχη εδώ, αλλά για μένα θα αποφύγω οποιαδήποτε ιατρικά ανέκδοτα. Οι χειριστές σας επιτρέπουν να κάνετε κάποια μαθηματικά στον κώδικα CSS και μπορεί να σας βοηθήσει αρκετά. Το παράδειγμα του οδηγού Sass είναι ιδανικό για να το παρουσιάσετε:
.δοχείο πλάτος: 100%; άρθρο float: left? πλάτος: 600px / 960px * 100%; κατά μέρος float: right; πλάτος: 300px / 960px * 100%;
Το παραπάνω παράδειγμα δημιουργεί ένα σύστημα πλέγματος 960px με ελάχιστη ταλαιπωρία. Θα καταρτίσει ωραία για το ακόλουθο CSS:
.δοχείο πλάτος: 100%; άρθρο float: left? πλάτος: 62,5%. κατά μέρος float: right; πλάτος: 31,25%.
Μια μεγάλη χρήση που βρίσκω για τις επιχειρήσεις είναι πραγματικά να ανακατεύουμε χρώματα. Εάν ρίξετε μια ματιά στο μήνυμα επιτυχίας Sass παραπάνω δεν είναι ξεκάθαρο ότι το χρώμα του φόντου και των συνόρων έχει κάποιο είδος σχέσης. Αφαιρώντας μια σκιά του γκρι μπορούμε να σκουρίνουμε το χρώμα, καθιστώντας τη σχέση ορατή:
$ primary: # 7EA800; .message-επιτυχία @extend% button; φόντο: $ πρωτογενές; χρώμα: #fff; border-color: $ primary - # 111;
Όσο ελαφρύτερο είναι το αφαιρεμένο χρώμα, τόσο πιο σκούρα θα είναι η προκύπτουσα απόχρωση. Όσο πιο ελαφρύ είναι το προστιθέμενο χρώμα, τόσο πιο ελαφριά γίνεται η σκιά που προκύπτει.
Λειτουργίες
Υπάρχει ένας μεγάλος αριθμός λειτουργιών που μπορείτε να χρησιμοποιήσετε: Αριθμητικές λειτουργίες, λειτουργίες στοιχειοσειρών, λειτουργίες λιστών, λειτουργίες χρωμάτων και πολλά άλλα. Ρίξτε μια ματιά στη μακρά λίστα στην τεκμηρίωση του προγραμματιστή. Θα ρίξω μια ματιά σε ένα ζευγάρι εδώ για να σας δείξω πώς λειτουργούν.
ο φωτίζω και αμαυρώνω μπορεί να χρησιμοποιηθεί για να αλλάξει η ελαφρότητα ενός χρώματος. Αυτό είναι καλύτερο από την αφαίρεση των αποχρώσεων, καθιστά τα πάντα πιο αρθρωτά και προφανή. Ρίξτε μια ματιά στο προηγούμενο παράδειγμα μας χρησιμοποιώντας τη λειτουργία σκουρόχρωσης.
$ primary: # 7EA800; .message-επιτυχία @extend% button; φόντο: $ πρωτογενές; χρώμα: #fff; Χρώμα περιγράμματος: σκούρο ($ πρωτοβάθμια, 5)?
Το δεύτερο επιχείρημα της λειτουργίας είναι το ποσοστό σκοτεινότητας που απαιτείται. Όλες οι λειτουργίες έχουν παραμέτρους. ρίξτε μια ματιά στην τεκμηρίωση για να δείτε τι είναι! Ακολουθούν μερικές άλλες αυτό-επεξηγηματικές λειτουργίες χρωμάτων: αποκορεσμένο, διαβρέχω, αντιστρέφω, κλίμακα του γκρι.
ο ceil όπως και στην PHP, επιστρέφει έναν αριθμό στρογγυλοποιημένο στον επόμενο ακέραιο αριθμό. Αυτό μπορεί να χρησιμοποιηθεί κατά τον υπολογισμό των πλάτους της στήλης ή αν δεν θέλετε να χρησιμοποιήσετε πολλά δεκαδικά ψηφία στο τελικό CSS.
.τίτλος font-size: ceil ($ head_size * 1.3314);
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Τα χαρακτηριστικά του Sass μας δίνουν μεγάλη δύναμη να γράφουμε καλύτερα CSS με λιγότερες προσπάθειες. Η σωστή χρήση των mixins, των επεκτάσεων, των λειτουργιών και των μεταβλητών θα καταστήσει τα φύλλα στυλ πιο διατηρήσιμα, πιο ευανάγνωστα και ευκολότερα γραμμένα.
Εάν ενδιαφέρεστε για έναν άλλο παρόμοιο προεπεξεργαστή CSS προτείνω να ρίξετε μια ματιά στο ΜΗΝ (ή να δείτε τον οδηγό για αρχάριους) - το υποκείμενο κεφάλαιο είναι πολύ το ίδιο!
