Μπορεί να έχετε ακούσει την προεπεξεργασία του CSS και να αναρωτιέστε τι είναι όλο το buzz. Ίσως να έχετε ακούσει Sass ή ΠΙΟ ΛΙΓΟ .
Εν ολίγοις, προεπεξεργασία του CSS σας επιτρέπει να γράφετε πιο συνοπτικά φύλλα στυλ τα οποία είναι διαμορφωμένα ωραία και απαιτούν λιγότερες επαναλαμβανόμενες τεχνικές που συνήθως συναντώνται όταν γράφετε τον κώδικα CSS. Το αποτέλεσμα είναι πιο δυναμικό στυλ και άφθονος χρόνος που εξοικονομείται κατά την ανάπτυξη ιστοτόπων ή εφαρμογών.
Αν γράφετε ήδη CSS, τότε μπορείτε εύκολα να μάθετε να προεπεξεργαστείτε το CSS. Μόλις κατανοήσετε το πεδίο εφαρμογής του Sass, θα αναρωτηθείτε γιατί δεν μεταβαίνετε νωρίτερα.
Το Sass μοιάζει με το CSS, αλλά έχει τις προφανείς διαφορές του μόλις βυθιστείτε. Υπάρχουν δύο τρόποι γραφής του Sass και τελικά εξαρτάται από εσάς ποιο στυλ προτιμάτε. Χρησιμοποιώ το στίχο (.scss) στο στυλ μου, επειδή μου αρέσει να απεικονίζω πραγματικά πού ένα μπλοκ τελειώνει και ξεκινάει όταν πολύ κώδικας γίνεται ένθετο. Μόλις επεξεργαστεί ο κώδικας Sass μεταγλωττίζεται αυτόματα στο παραδοσιακό CSS χρησιμοποιώντας μια μηχανή προεπεξεργασίας.
Υπάρχουν πολλές διαθέσιμες εφαρμογές οι οποίες επιτρέπουν την εκ των προτέρων συμπύκνωση του Sass να είναι απρόσκοπτη και εντελώς εύκολη. Για να εγκαταστήσετε, μπορείτε να χρησιμοποιήσετε τη γραμμή εντολών για όσο διάστημα έχετε εγκαταστήσει το Ruby στο μηχάνημά σας. Αν δεν είστε ευχαριστημένοι με τη γραμμή εντολών, υπάρχουν και άλλες επιλογές (περισσότερες πληροφορίες παρακάτω) και αν αυτό είναι πάνω από το κεφάλι σας, επισκεφθείτε το Sass-lang.com για να μάθετε πώς να το κάνετε αυτό με μια εύκολη μορφή βήμα προς βήμα. Στο τέλος, χρησιμοποιώντας οποιαδήποτε μέθοδο είναι γραμμή εντολών ή εφαρμογή, η εγκατάσταση του Sass θα παρακολουθεί τις αλλαγές σας και θα καταρτίζεται αυτόματα προς τα κάτω στο παραδοσιακό CSS για εσάς.
Συνιστώ ιδιαίτερα να χρησιμοποιείτε εφαρμογές όπως Codekit , LiveReload , ή Μίγμα που σας βοηθούν να ρυθμίσετε ένα έργο Sass σε Mac από το μηδέν ή αν είστε χρήστης των Windows που συστήνω PrePros . Η Codekit, η επιλογή του προεπεξεργαστή μου, με βοηθά με την προεπεξεργασία του Sass μου, καθώς και την επικύρωση και τον περιορισμό του κώδικα, ώστε ο ιστότοπός σας να εκτελείται γρήγορα και αποτελεσματικά. (Η δυνατότητα δημιουργίας Πυξίδα ή Bourbon τα βασικά έργα στο πλαίσιο του Codekit είναι επίσης ένα εκπληκτικό χαρακτηριστικό, αλλά είναι πέρα από το πεδίο εφαρμογής αυτού του άρθρου). Αφού εξοικειωθείτε με το Sass, βεβαιωθείτε ότι έχετε δει πώς να χρησιμοποιήσετε την Compass και το Bourbon στα έργα Sass.
Το Sass αντιπροσωπεύει τα Syntactically Awesome Stylesheets και δημιουργήθηκε από Χάμπτον Κτάλλιν . Το Sass εισάγει νέες έννοιες, όπως μεταβλητές, mixins και εμφύτευση στον κώδικα CSS που ήδη γνωρίζετε και αγαπάτε. Αυτές οι έννοιες καθιστούν τελικά το CSS σας εκπληκτικό, πιο εύκολο να γράψετε και πιο δυναμικό. Όλα αυτά τα χαρακτηριστικά συνδυάζονται, επιταχύνουν τη ροή εργασίας κάθε σχεδιαστή ή προγραμματιστή.
Αυτό που συνήθως μπερδεύει τους ανθρώπους είναι οι εναλλακτικοί τρόποι να γράψω το Sass. Θα δείτε άλλα μαθήματα ή εξηγήσεις του Sass χρησιμοποιώντας το .SCSS ή την επέκταση .Sass για τα αρχεία Sass. Αυτό είναι εμφανές επειδή υπάρχουν δύο τρόποι γραφής του κώδικα που παράγουν την ίδια έξοδο. Το πιο συνηθισμένο έχω δει και η μέθοδος που χρησιμοποιώ αυτήν τη στιγμή είναι η έκδοση που ονομάζεται .SCSS. Μια άλλη μέθοδος είναι η επέκταση .Sass που εξαρτάται περισσότερο από την εσοχή παρά από τα ακριβή στοιχεία και εξαρτάται από το λευκό διάστημα. Με αυτή τη σύνταξη δεν υπάρχει ανάγκη για ημίξηνα ή αγκύλες όπως βλέπετε στο CSS και στη σύνταξη .SCSS.
Δείτε το παρακάτω παράδειγμα.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackΕντάξει, λοιπόν, τώρα αναρωτιέστε πώς μπορείτε να ρυθμίσετε το Sass για τα δικά σας έργα. Η διαδικασία είναι πολύ εύκολη, ειδικά εάν χρησιμοποιείτε το Codekit ή μια παρόμοια εφαρμογή για να σας βοηθήσουμε στην πορεία.
Μια τυπική δομή αρχείων ενός έργου Sass μοιάζει με το περίγραμμα παρακάτω. Αυτό μπορεί να φανεί τρομακτικό, αλλά υπόσχομαι ότι η ροή εργασίας σας θα βελτιωθεί μόλις τυλίξετε το κεφάλι σας γύρω από το πώς τα πράγματα λειτουργούν μαζί. Στο τέλος όλα τα Sass σας καταρτίζονται σε ένα αρχείο CSS που θα είναι το αρχείο που θα συμπεριλάβετε μέσα στα έγγραφα εργασίας σας είτε HTML, PHP, κλπ ...
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Ο τρόπος που ρυθμίζετε τη δομή σας εξαρτάται τελικά από εσάς. Ξεκινήστε με μια βασική δομή και ταιριάξτε τις δικές σας ανάγκες και ροές εργασίας.
Το Sass επεκτείνει τον κανόνα @import CSS για να του επιτρέψει να εισάγει αρχεία Sass και SCSS. Όλα τα εισαγόμενα αρχεία συγχωνεύονται σε ένα μοναδικό αρχείο CSS. Επιπλέον, οποιεσδήποτε μεταβλητές ή mixins που ορίζονται στα εισαγόμενα αρχεία μεταφέρονται στο κύριο αρχείο, πράγμα που σημαίνει ότι μπορείτε ουσιαστικά να αναμίξετε και να ταιριάξετε οποιοδήποτε αρχείο και να είστε σίγουροι ότι όλα τα στυλ σας θα παραμείνουν σε παγκόσμιο επίπεδο.
@import παίρνει ένα όνομα αρχείου για εισαγωγή. Ως τελευταία λύση, τα αρχεία Sass ή SCSS θα εισαχθούν μέσω του ονόματος αρχείου που επιλέξατε. Εάν δεν υπάρχει επέκταση, η Sass θα προσπαθήσει να βρει ένα αρχείο με αυτό το όνομα και την επέκταση .scss ή .Sass και να το εισαγάγει.
Αν έχετε τυπική ρύθμιση του έργου Sass, θα παρατηρήσετε ορισμένους κανόνες @import μέσα σε ένα αρχείο βάσης. Αυτό απλά σας επιτρέπει να έχετε πολλαπλά αρχεία τα οποία συγχρονίζονται αποτελεσματικά μόλις συντάσσονται, για παράδειγμα:
@import "main.scss";ή:
@import "main";@PartialsΕάν έχετε ένα αρχείο SCSS ή Sass που θέλετε να εισαγάγετε, αλλά όχι να μεταγλωττίσετε σε CSS, μπορείτε να προσθέσετε μια υπογράμμιση στην αρχή του ονόματος αρχείου, το οποίο είναι γνωστό και ως μερικό. Καθώς ο κώδικας καταρτίζει, το Sass θα αγνοήσει τα μέρη όταν επεξεργάζεται το CSS. Για παράδειγμα, μπορεί να έχετε _buttons.scss, δεν θα δημιουργηθεί αρχείο _buttons.css και στη συνέχεια μπορείτε να @import "κουμπιά".
Η καλύτερη πρακτική είναι να δημιουργήσετε ένα κατάλογο μερών και να τοποθετήσετε όλα τα μερικά αρχεία Sass μέσα σε αυτό. Κάνοντας αυτό διασφαλίζει ότι δεν θα έχετε διπλά ονόματα αρχείων τα οποία δεν θα επιτρέψει η Sass, για παράδειγμα, το μερικό _buttons.scss και τα κουμπιά buttons.scss δεν μπορούν να υπάρχουν στον ίδιο κατάλογο. Η χρήση μερών είναι ένας πολύ καλός τρόπος να παραμείνετε οργανωμένοι σε παγκόσμιο επίπεδο. Εφόσον @import το αρχείο, το Sass που γράφετε είναι χρησιμοποιήσιμο σε όλο το έργο. Συνήθως μέσα σε μερικά μέρη δημιουργώ mixins ή μεταβλητές που θα χρησιμοποιηθούν σε όλο μου το έργο. Τους ονομάζω με βάση το περιεχόμενό τους και τα στοιχεία που σχεδιάζουν.
Οι μεταβλητές στο CSS είναι μια σημαντική ανακάλυψη στη σύγχρονη ανάπτυξη ιστού. Με το Sass μπορείτε να δημιουργήσετε μεταβλητές για πράγματα όπως είναι οι γραμματοσειρές, τα χρώματα, τα μεγέθη, το περιθώριο, τα παραπετάσματα κλπ. Ο κατάλογος είναι ατελείωτος. Αν γράφετε JavaScript ή PHP, η έννοια είναι αρκετά παρόμοια όσον αφορά τον ορισμό μεταβλητών και συμβάσεων.
Γιατί λοιπόν χρησιμοποιείτε μεταβλητές; Οι εύκολες μεταβλητές σας επιτρέπουν να χρησιμοποιήσετε ένα στοιχείο περισσότερες από μία φορές, παρόμοιο με μια κλάση σε HTML ή μια μεταβλητή στο JavaScript. Για παράδειγμα, λέτε ότι ορίζετε πολλαπλά τμήματα με συγκεκριμένο χρώμα φόντου. Μπορείτε να χρησιμοποιήσετε τη μεταβλητή που είναι πιο εύκολο να θυμάστε αντί του παραδοσιακού hex code ή του RGB υπολογισμού. Κάνοντας μια μεταβλητή με ένα εύκολο να θυμηθεί όνομα επιτρέπει τη λιγότερη αντιγραφή και επικόλληση και μια πιο παραγωγική ροή εργασίας. Η ίδια έννοια εφαρμόζεται όταν μια μεταβλητή μπορεί να εφαρμοστεί και με το Sass που είναι σχεδόν οπουδήποτε, για παράδειγμα αυτό το .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}θα οδηγήσει σε αυτό το αρχείο .css:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Το δροσερό μέρος για τις μεταβλητές είναι ότι είναι εξαιρετικά παρόμοιες με αυτές που χρησιμοποιούνται στις γλώσσες δέσμης ενεργειών. Οι μεταβλητές μέσα στο Sass μπορούν να χρησιμοποιηθούν τόσο σε λειτουργίες όσο και σε λειτουργίες. Οι τυπικές λειτουργίες μαθηματικών (+, -, *, / και%) υποστηρίζονται για αριθμούς. Για τα χρώματα υπάρχουν λειτουργίες ενσωματωμένες στο Sass που στοχεύουν την ελαφρότητα, την απόχρωση, τον κορεσμό και πολλά άλλα.
Η κατοχύρωση αυτής της λειτουργικότητας καθιστά τον κώδικα πιο δυναμικό από ποτέ. Για παράδειγμα, εάν θέλετε να αλλάξετε το χρώμα του συνολικού συνδέσμου του ιστότοπού σας, μπορείτε απλά να αλλάξετε τη μεταβλητή, να μεταγλωττίσετε ξανά και ο ιστότοπός σας θα ενημερωθεί δυναμικά καθ 'όλη τη διάρκεια. Ανατρέξτε σε ένα άλλο παράδειγμα παρακάτω για μια λίστα επαναχρησιμοποιήσιμης πλοήγησης, αυτή .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} θα οδηγήσει σε αυτό το .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Η τοποθέτηση είναι ένας τεράστιος λόγος για τον οποίο αγαπώ τον Sass. Γράφετε λιγότερες γραμμές κώδικα στο τέλος και όλο τον κώδικα σας είναι εύκολο να διαβαστεί λόγω της ένθετης μορφοποίησης. (Η ίδια ιδέα της φωλεοποίησης βρίσκεται επίσης σε λιγότερο).
Υπάρχουν δύο τύποι φωλεοποίησης:
Ο επιλογέας επιλογής στο Sass είναι παρόμοιος με τον τρόπο με τον οποίο θα τοποθετήσετε HTML:
Main Content
Sidebar Content
Η έκδοση Sass της φωλιάς:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}θα οδηγήσει στην ακόλουθη CSS:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Ο δεύτερος τύπος φωλεοποίησης είναι η εμφύτευση ιδιοκτησίας. Μπορείτε να αποθηκεύσετε ιδιότητες με το ίδιο πρόθεμα για καλύτερα στοιχεία στόχευσης που οδηγούν σε λιγότερες γραμμές κώδικα, όπως για παράδειγμα:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}θα οδηγήσει σε αυτό το CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Από όλα τα χαρακτηριστικά του Sass Τα Mixins πρέπει να είναι τα πιο δυνατά. Τα μίγματα είναι παρόμοια με μια μεταβλητή αλλά με στεροειδή. Μπορείτε να ορίσετε ένα πλήρες ύφος ενός στοιχείου και να επαναχρησιμοποιήσετε αυτά τα στυλ σε όλο το έργο σας.
Τα Mixins ορίζονται χρησιμοποιώντας την οδηγία @mixin , η οποία παίρνει ένα μπλοκ από στυλ που δημιουργήσατε πριν και εφαρμόζοντας το στον επιλογέα της επιλογής σας χρησιμοποιώντας την οδηγία @include . Παρακάτω είναι ένα κοινό μοτίβο CSS που χρησιμοποιείται για τη δημιουργία ενός οριζόντιου μενού πλοήγησης. Αντί να γράφετε τον ίδιο κώδικα για κάθε περίπτωση πλοήγησης, απλώς χρησιμοποιήστε ένα mixin και αργότερα το συμπεριλάβετε όπου χρειάζεται. Αυτή η ιδέα μπορεί να γίνει για οτιδήποτε χρησιμοποιείτε ξανά και ξανά, όπως κουμπιά, τυπογραφία, κλίσεις κλπ ...
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}Και εδώ συμπεριλαμβάνουμε το mixin με μία γραμμή κώδικα:
ul.navbar {@include navigate;}που έχει ως αποτέλεσμα αυτό το CSS:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Μπορείτε ακόμη να πάτε μέχρι τη δημιουργία προσαρμόσιμων mixins που χρησιμοποιούν τα επιχειρήματα για να ενημερώσουν δυναμικά. Επιπλέον, μπορείτε να συμπεριλάβετε mixins μέσα σε άλλα mixins ή να δημιουργήσετε λειτουργίες χρησιμοποιώντας mixins και πολλά άλλα. Η ισχύς πίσω από αυτά είναι απολύτως τεράστια.
Υπάρχουν κάποιες δημοφιλείς συλλογές προκαθορισμένων mixin στις οποίες αναφέρθηκα παλαιότερα με την ονομασία Compass και Bourbon. Με ένα απλό @import στο έργο σας μπορείτε να έχετε πρόσβαση σε ήδη δημιουργημένες mixins που χρησιμοποιούνται συνήθως σε όλο τον ιστό. Υπάρχουν τόσες πολλές επιλογές που είναι δύσκολο να καλύψουμε όλα τα διαθέσιμα, αλλά είναι σίγουρα διασκεδαστικό να πειραματιστείτε και να βγάλετε τα χέρια σας βρώμικα δημιουργώντας προσαρμοσμένες κινήσεις ή μεταβάσεις με μερικές γραμμές κώδικα και όχι πλήρη οθόνη. Τα Mixins καθιστούν την ανάπτυξη του cross browser έναν αεράκι αν δεν αισθάνεστε σαν να πληκτρολογείτε πρόθεμα που καθορίζεται από το πρόγραμμα περιήγησης ξανά και ξανά μέσα στο CSS.
Για παράδειγμα, εδώ δημιουργούμε ένα mixin με επιχειρήματα που του επιτρέπουν να προσαρμόζεται.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }η οποία μας δίνει αυτό το CSS όταν είναι μεταγλωττισμένο:
p {border-color: blue;border-width: lin;border-style: dashed;}Ενώ η Sass έχει μια καμπύλη μάθησης, πιστεύω πραγματικά ότι μόλις καταλάβετε τις μεθόδους και τη σύνταξη, δεν θα θέλετε ποτέ να επιστρέψετε στη συγγραφή του τυπικού CSS ξανά.
Ο Sass είναι εξαιρετικά ισχυρός και έχω καλύψει μόνο τα βασικά εδώ. Με το παραδοσιακό CSS, συναντήσαμε όλοι την αντιγραφή και επικόλληση ή την εύρεση και αντικατάσταση των εργασιών που χάνουν τόσο πολύ χρόνο στο στάδιο ανάπτυξης του έργου σας. Δοκιμάστε το Sass και ανακαλύψτε πώς μπορείτε να δημιουργήσετε μια αποτελεσματική ροή εργασιών στα μελλοντικά σας έργα.
Χρησιμοποιείτε Sass ή προτιμάτε διαφορετικό προεπεξεργαστή CSS; Έχετε ένα αγαπημένο mixin; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, χρησιμοποιεί εικόνα από μηδέν έως ήρωα μέσω Shutterstock.