Τι είναι το Sass; Μάθετε πώς να χρησιμοποιείτε αυτήν τη γλώσσα επέκτασης CSS

Τα συντακτικά φοβερά φύλλα στυλ (Sass) είναι μια δημοφιλής γλώσσα επέκτασης CSS. Η γλώσσα υπάρχει εδώ και περίπου 15 χρόνια. Λειτουργεί καλά με κάθε έκδοση του CSS, καθιστώντας το συμβατό με κάθε βιβλιοθήκη και πλαίσιο CSS, από το Bootstrap έως το Foundation.

Η γλώσσα σάς επιτρέπει να γράψετε κώδικα Sass και στη συνέχεια να μεταγλωττίσετε αυτόν τον κώδικα σε CSS. Η αξία της χρήσης Sass αντί για απλό CSS είναι ότι παρέχει πρόσθετες δυνατότητες που επί του παρόντος βρίσκονται εκτός του πεδίου εφαρμογής του CSS.

Σε αυτό το σεμινάριο, θα μάθετε πώς να χρησιμοποιείτε το Sass και τις πιο σημαντικές δυνατότητες του.

Εγκατάσταση Sass

Υπάρχουν διάφοροι τρόποι χρήσης του Sass στη συσκευή σας. Αυτά περιλαμβάνουν την εκτέλεση μιας εφαρμογής (όπως το LiveReload ή το Scout-App), τη λήψη Sass από το GitHub, ή την εγκατάστασή του χρησιμοποιώντας npm.

Εγκατάσταση Sass With npm

Για να εγκαταστήσετε το Sass χρησιμοποιώντας npm θα χρειαστεί να το κάνετε εγκαταστήστε το NodeJS και το npm στη συσκευή σας. Τότε θα χρειαστεί να δημιουργήσετε ένα

πακέτο.json αρχείο (που είναι μια καλή πρακτική κατά την εγκατάσταση οποιουδήποτε πακέτου npm στα έργα σας). Μπορείτε να δημιουργήσετε ένα βασικό πακέτο.json αρχείο στον κατάλογο του έργου σας με την ακόλουθη εντολή τερματικού:

npm init -y

Η εκτέλεση αυτής της εντολής θα δημιουργήσει ένα αρχείο package.json με το ακόλουθο περιεχόμενο:

{
 "name": "my_app",
 "έκδοση": "1.0.0",
 "περιγραφή": "",
 "main": "index.js",
 "σενάρια": {
 "test": "echo \"Σφάλμα: δεν καθορίστηκε δοκιμή\" && έξοδος 1"
 },
 "λέξεις-κλειδιά": [],
 "συγγραφέας": "",
 "άδεια": "ISC"
}

ο πακέτο.json Το αρχείο είναι σημαντικό γιατί χρησιμεύει ως διαμόρφωση για το έργο σας. Κάθε φορά που εγκαθιστάτε ένα νέο πακέτο npm, το πακέτο.json αρχείο θα αντικατοπτρίζει αυτό.

Τώρα μπορείτε να εγκαταστήσετε το Sass εισάγοντας την ακόλουθη εντολή στο τερματικό σας:

npm εγκατάσταση sass

Αυτή η εντολή θα ενημερώσει το πακέτο.json αρχείο δημιουργώντας ένα νέο πεδίο εξάρτησης, το οποίο θα περιέχει το νέο πακέτο Sass. Θα δημιουργήσει επίσης ένα νέο πακέτο-κλείδωμα.json αρχείο και εγκατάσταση sass (συν εξαρτήσεις) σε a node_modules Ευρετήριο.

Οι διαφορετικοί τύποι αρχείων Sass

Ένα αρχείο Sass μπορεί να έχει μία από τις δύο επεκτάσεις, .σας ή .scss. Η κύρια διαφορά μεταξύ τους είναι ότι το .scss Το αρχείο χρησιμοποιεί σγουρά άγκιστρα και ερωτηματικά (όπως το CSS), ενώ το .σας Το αρχείο δομεί το CSS χρησιμοποιώντας εσοχή (όπως η Python). Ορισμένοι προγραμματιστές προτιμούν να χρησιμοποιούν το .scss αρχείο καθώς η δομή του είναι πιο κοντά στο CSS.

Παράδειγμα αρχείου .scss

$primary-color: μπλε;
σώμα {
 χρώμα: $primary-color;
 Π {
 χρώμα: κόκκινο;
 }
}

Παράδειγμα αρχείου .sass

$primary-color: μπλε
σώμα
 χρώμα: $primary-color
 Π
 χρώμα: κόκκινο

Μεταγλώττιση ενός αρχείου Sass σε CSS

Μπορείτε να μεταγλωττίσετε ένα μεμονωμένο αρχείο Sass χρησιμοποιώντας το sass πρόγραμμα γραμμής εντολών:

sass file.scss > file.css

Μπορείτε επίσης να εκτελέσετε το sass σε όλα τα αρχεία σε έναν συγκεκριμένο κατάλογο:

sass scss: dist/css/

Αυτή η εντολή μεταγλωττίζει όλα τα αρχεία Sass εντός του scss κατάλογο και αποθηκεύει τα αρχεία που προκύπτουν dist/css.

Εάν χρησιμοποιείτε npm, μπορείτε να ρυθμίσετε μια βολική συντόμευση για τη συλλογή sass χρησιμοποιώντας το σενάρια πεδίο στο δικό σου πακέτο.json αρχείο:

"σενάρια": {
 "test": "echo \"Σφάλμα: δεν καθορίστηκε δοκιμή\" && έξοδος 1",
 "sass": "sass --παρακολουθήστε scss: dist/css/"
 },

Αυτή η διαμόρφωση χρησιμοποιεί το --παρακολουθώ επιλογή. Διατηρεί το sass σε λειτουργία και διασφαλίζει ότι μεταγλωττίζει εκ νέου αυτά τα αρχεία όποτε αλλάζουν. Για κάθε αρχείο, το sass θα δημιουργήσει ένα .css και ένα .css.map αρχείο.

Για να εκτελέσετε το παραπάνω σενάριο Sass, θα χρειαστεί να εκτελέσετε την ακόλουθη εντολή στο τερματικό σας:

npm τρέξτε sass

Η εκτέλεση αυτής της εντολής θα δημιουργήσει έξοδο παρόμοια με αυτό:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --παρακολουθήστε scss: dist/css/
Μεταγλωττίστηκε το scss\main.scss στο dist\css\main.css.
Ο Sass παρακολουθεί αλλαγές. Πατήστε Ctrl-C για να σταματήσετε.

Μεταβλητές Sass

Μπορείτε να δημιουργήσετε μεταβλητές στο CSS σήμερα, αλλά πριν από 15 χρόνια δεν υπήρχαν μεταβλητές CSS, επομένως η υποστήριξη Sass γι' αυτές ήταν πολύτιμη. Οι μεταβλητές Sass λειτουργούν σχεδόν με τον ίδιο τρόπο που λειτουργούν οι μεταβλητές CSS. Αποθηκεύουν τιμές (όπως χρώματα) που σκοπεύετε να χρησιμοποιήσετε σε ένα αρχείο CSS. Ένα από τα κύρια πλεονεκτήματα των μεταβλητών είναι ότι σας επιτρέπουν να ενημερώσετε πολλές εμφανίσεις μιας τιμής αλλάζοντας την σε ένα μόνο σημείο.

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

$primary-color: μπλε;
σώμα {
 χρώμα: $primary-color;
}

Θα γίνει μεταγλώττιση στο ακόλουθο CSS:

σώμα {
 χρώμα: μπλε;
}

Όπως μπορείτε να δείτε από το παραπάνω αρχείο δεν υπάρχουν μεταβλητές CSS. Το πλεονέκτημα των μεταβλητών είναι ότι οποιαδήποτε αλλαγή γίνει στο αρχείο Sass θα ενημερώσει το αντίστοιχο αρχείο CSS.

Sass Mixins

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

Κάθε μίξη ξεκινά με το @mixin λέξη-κλειδί, ακολουθούμενο από το όνομα που θέλετε να αντιστοιχίσετε στο mixin. Έχετε την επιλογή να μεταβιβάσετε μεταβλητές στο mixin ως παραμέτρους και να χρησιμοποιήσετε αυτές τις μεταβλητές στο σώμα του mixin, με τον ίδιο σχεδόν τρόπο ως συνάρτηση.

Χρησιμοποιώντας ένα Mixin

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 γραμματοσειρά-οικογένεια: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 φόντο-χρώμα: $primary-color;
 χρώμα: $secondary-color;
}
#Σπίτι {
 @include light-theme (μπλε).
}

Το πρώτο πράγμα που μπορεί να παρατηρήσετε στον παραπάνω κώδικα είναι ότι το mixin δέχεται δύο ορίσματα. Μπορείτε να εκχωρήσετε προεπιλεγμένες τιμές σε ορίσματα και να τις παρακάμψετε όταν το συμπεριλάβετε.

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

Η μεταγλώττιση του παραπάνω κώδικα Sass θα δημιουργήσει τον ακόλουθο κώδικα CSS στο αρχείο προορισμού σας:

#Σπίτι {
 γραμματοσειρά-οικογένεια: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 Χρώμα φόντου: μπλε;
 χρώμα: #2c2c2c;
}

Λειτουργίες Sass

Εκτός από τις διαφορετικές λέξεις-κλειδιά, η κύρια διαφορά μεταξύ μιας συνάρτησης και ενός mixin είναι ότι μια συνάρτηση πρέπει να επιστρέψει κάτι. Μπορείτε να χρησιμοποιήσετε τις συναρτήσεις Sass για να υπολογίσετε τιμές ή να εκτελέσετε λειτουργίες.

@function add-numbers ($num-one, $num-two){
 $sum: 0;
 $sum: $num-one + $num-two;
 @return $sum 
}

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

Ενότητες Sass

Εάν έπρεπε να συμπεριλάβετε όλες τις μεταβλητές, τις μίξεις και τις συναρτήσεις σας στο ίδιο αρχείο, θα είχατε ένα τεράστιο αρχείο Sass όταν δημιουργείτε μεγάλες εφαρμογές. Οι μονάδες παρέχουν έναν τρόπο διαχωρισμού μεγάλων αρχείων σε μικρότερα που το sass συνδυάζει κατά τη μεταγλώττιση. Για παράδειγμα, μπορείτε να έχετε μια λειτουργική μονάδα και μια μονάδα mixin, το μόνο που χρειάζεται να θυμάστε είναι το @χρήση λέξη-κλειδί.

Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να διαχωρίσετε το προηγούμενο mixin στο δικό του αρχείο:

Το αρχείο mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 γραμματοσειρά-οικογένεια: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 φόντο-χρώμα: $primary-color;
 χρώμα: $secondary-color;
}

Το αρχείο main.scss

@χρησιμοποιήστε 'μίξεις';
#Σπίτι{
 @include mixins.light-theme;
}

Για να εισαγάγετε και να χρησιμοποιήσετε ένα εξωτερικό αρχείο ως λειτουργική μονάδα, θα χρειαστεί να χρησιμοποιήσετε το @χρήση λέξη-κλειδί για την εισαγωγή του. Στη συνέχεια, για να χρησιμοποιήσετε ένα συγκεκριμένο mixin από το εισαγόμενο αρχείο, προσθέστε το πρόθεμα του συγκεκριμένου ονόματος mixin με το όνομα του αρχείου ακολουθούμενο από μια τελεία. Η μεταγλώττιση των παραπάνω αρχείων θα δημιουργήσει τον ακόλουθο κώδικα CSS:

#Σπίτι {
 γραμματοσειρά-οικογένεια: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 Χρώμα φόντου: λευκό;
 χρώμα: #2c2c2c;
}

Χρησιμοποιήστε το Sass για να επεκτείνετε και να οργανώσετε το CSS σας

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

Αυτό το άρθρο σάς διδάσκει πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Sass. Έχετε μάθει πώς να δημιουργείτε μεταβλητές, μίξεις, συναρτήσεις και λειτουργικές μονάδες Sass. Τώρα το μόνο που σας μένει να κάνετε είναι να δημιουργήσετε ένα έγγραφο HTML και να παρακολουθήσετε τον κώδικα Sass να ζωντανεύει.

8 Βασικές συμβουλές και κόλπα για το CSS που πρέπει να γνωρίζει κάθε προγραμματιστής

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα