Ο πλήρης οδηγός για το SCSS / SASS

Εγγραφείτε στο ενημερωτικό δελτίο μου για να ενημερωθείτε για το επόμενο άρθρο μου!

Σε αυτό το σεμινάριο Sassy, ​​το Sass και το SCSS θα αναφερθούν σχεδόν στο ίδιο πράγμα. Εννοιολογικά, δεν υπάρχει μεγάλη διαφορά. Θα μάθετε τη διαφορά δεδομένου ότι μαθαίνετε περισσότερα, αλλά βασικά το SCSS είναι αυτό που οι περισσότεροι άνθρωποι χρησιμοποιούν τώρα. Είναι μια πιο πρόσφατη (και σύμφωνα με κάποια, ανώτερη) έκδοση της αρχικής σύνταξης Sass.

Για να αρχίσετε να εκμεταλλεύεστε το Sass, το μόνο που χρειάζεται να γνωρίζετε είναι οι βασικές έννοιες. Θα προσπαθήσω να τα καλύψω σε αυτό το σεμινάριο.

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

Όλοι οι κώδικες Sass / SCSS μεταγλωττίζονται πίσω στο πρότυπο CSS, ώστε ο περιηγητής να μπορεί να κατανοήσει και να αποδώσει τα αποτελέσματα. Οι φυλλομετρητές δεν έχουν άμεση υποστήριξη για το Sass / SCSS ή για οποιονδήποτε άλλο προ-επεξεργαστή CSS, ούτε οι τυποποιημένες προδιαγραφές CSS παρέχουν εναλλακτικές λύσεις για παρόμοιες λειτουργίες (ακόμα.)

Ας ξεκινήσουμε!

Δεν μπορείτε πραγματικά να εκτιμήσετε τη δύναμη του Sassy CSS έως ότου δημιουργήσετε τον πρώτο σας βρόχο για να δημιουργήσετε τιμές ιδιοκτησίας και να δείτε τα πλεονεκτήματά του. Αλλά θα ξεκινήσουμε από τις βασικές αρχές SCSS και θα τις χτίσουμε προς το τέλος.

Τι μπορεί να κάνει το Sass / SCSS ότι το CSS Vanilla δεν μπορεί;

  1. Κανόνες που έχουν ενσωματωθεί: Κλείστε τις ιδιότητες CSS σας μέσα σε πολλαπλά σύνολα {} παρενθέσεων. Αυτό κάνει τον κώδικα CSS σας λίγο πιο καθαρό και πιο έξυπνο.
  2. Μεταβλητές: Το πρότυπο CSS έχει μεταβλητούς ορισμούς. Ποια είναι η συμφωνία; Μπορείτε να κάνετε πολλά περισσότερα με τις μεταβλητές Sass: επαναλάβετε τους μέσω ενός for-loop και δημιουργήστε δυναμικά τις τιμές των ιδιοτήτων. Μπορείτε να τα ενσωματώσετε σε ονόματα ιδιοτήτων CSS. Είναι χρήσιμο για ορισμούς ιδιοκτησίας-ονόματος-N {...}.
  3. Καλύτεροι χειριστές: Μπορείτε να προσθέσετε, να αφαιρέσετε, να πολλαπλασιάσετε και να διαιρέσετε τις τιμές CSS. Σίγουρα το αρχικό CSS υλοποιεί αυτό μέσω του calc (), αλλά στο Sass δεν χρειάζεται να χρησιμοποιήσετε calc () και η εφαρμογή είναι ελαφρώς πιο διαισθητική.
  4. Λειτουργίες: Το Sass σάς επιτρέπει να δημιουργείτε ορισμούς CSS ως επαναχρησιμοποιούμενες λειτουργίες. Μιλώντας εκ των οποίων…
  5. Τριγωνομετρία: Μεταξύ πολλών από τα βασικά χαρακτηριστικά του (+, -, *, /), το SCSS σάς επιτρέπει να γράφετε τις δικές σας λειτουργίες. Μπορείτε να γράψετε τις λειτουργίες σας sine και cosine (τριγωνομετρία) εξ ολοκλήρου χρησιμοποιώντας μόνο τη σύνταξη Sass / SCSS ακριβώς όπως θα κάνατε σε άλλες γλώσσες όπως η JavaScript. Απαιτούνται ορισμένες γνώσεις τριγωνομετρίας. Αλλά βασικά, σκεφτείτε το ημίτονο και το συνημίτονο ως μαθηματικές αξίες που μας βοηθούν να υπολογίσουμε την κίνηση κυκλικών γραμμών προόδου ή να δημιουργήσουμε κινούμενα αποτελέσματα κύματος, για παράδειγμα.
  6. Ρυθμίσεις ροής κώδικα και ελέγχου: Μπορείτε να γράψετε CSS χρησιμοποιώντας γνωστές εντολές ροής κώδικα και ελέγχου, όπως for-loops, while-loops, εάν-else δηλώσεις παρόμοιες με άλλες γλώσσες. Αλλά μην ξεγελιέστε, το Sass εξακολουθεί να έχει ως αποτέλεσμα το CSS στο τέλος. Ελέγχει μόνο τον τρόπο δημιουργίας της ιδιότητας και των τιμών. Δεν είναι γλώσσα σε πραγματικό χρόνο. Μόνο ένας προ-επεξεργαστής.
  7. Mixins. Δημιουργήστε μια σειρά από ιδιότητες CSS μία φορά και επαναχρησιμοποιήστε τις ή "μείγμα" μαζί με οποιονδήποτε νέο ορισμό. Στην πράξη, μπορείτε να χρησιμοποιήσετε το mixins για να δημιουργήσετε ξεχωριστά θέματα για την ίδια διάταξη, για παράδειγμα.

Sass Pre-Processor

Το Sass δεν είναι δυναμικό. Δεν θα μπορείτε να δημιουργείτε ή να ζωντανεύετε ιδιότητες και τιμές CSS σε πραγματικό χρόνο. Αλλά μπορείτε να τα δημιουργήσετε με πιο αποτελεσματικό τρόπο και να αφήσετε τυπικές ιδιότητες (CSS animation, για παράδειγμα) από εκεί.

Νέα σύνταξη

Το SCSS δεν προσθέτει πραγματικά νέες δυνατότητες στη γλώσσα CSS. Μόνο νέα σύνταξη που σε πολλές περιπτώσεις μπορεί να συντομεύσει το χρόνο που αφιερώνεται στην γραφή του κώδικα CSS.

Προϋποθέσεις

Οι προ-επεξεργαστές CSS προσθέτουν νέες λειτουργίες στη σύνταξη της γλώσσας CSS.

Υπάρχουν 5 επεξεργαστές CSS: Sass, SCSS, Less, Stylus και PostCSS.

Αυτό το σεμινάριο καλύπτει κυρίως το SCSS που είναι παρόμοιο με το Sass. Μπορείτε να μάθετε περισσότερα για το Sass εδώ: https://www.sass-lang.com/.

  • SASS (.sass) Φύλλα στυλ σχεδίασης.
  • SCSS (.scss) Sassy φύλλα στυλ Cascading.

Οι επεκτάσεις .sass και .scss είναι παρόμοιες αλλά όχι ίδιες. Για τους λάτρεις της γραμμής εντολών εκεί έξω, μπορείτε να μετατρέψετε από .sass σε .scss και πίσω:

Μετατρέψτε τα αρχεία μεταξύ των μορφών .scss και .sass χρησιμοποιώντας το Sass pre-processor command sass-convert.

Το Sass ήταν η πρώτη προδιαγραφή για το Sassy CSS με επέκταση αρχείου .sass. Η ανάπτυξη ξεκίνησε το 2006. Αλλά αργότερα δημιουργήθηκε μια εναλλακτική σύνταξη με επέκταση .scss την οποία ορισμένοι προγραμματιστές πιστεύουν ότι είναι καλύτεροι.

Προς το παρόν δεν υπάρχει υποστήριξη για το Sassy CSS σε οποιοδήποτε πρόγραμμα περιήγησης, ανεξάρτητα από το ποια σύνταξη ή επέκταση Sass θα χρησιμοποιούσατε. Αλλά μπορείτε να πειραματιστείτε ανοιχτά με οποιονδήποτε από τους 5 προ-επεξεργαστές του codepen.io. Εκτός από αυτό θα πρέπει να εγκαταστήσετε έναν αγαπημένο CSS προ-επεξεργαστή στο διακομιστή ιστού σας.

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

Superset

Το Sassy CSS σε οποιαδήποτε από τις εκδηλώσεις του είναι ένα υπερσύνολο της γλώσσας CSS. Αυτό σημαίνει ότι όλα όσα δουλεύουν στο CSS θα εξακολουθήσουν να εργάζονται σε Sass ή SCSS.

Μεταβλητές

Το Sass / SCSS σάς επιτρέπει να εργάζεστε με μεταβλητές. Διαφέρουν από τις μεταβλητές CSS που ξεκινούν με τη διπλή εξόρμηση που πιθανώς έχετε δει πριν (για παράδειγμα, --color: # 9c27b0). Αντ 'αυτού ξεκινούν με ένα σύμβολο του δολαρίου (για παράδειγμα $ color: # 9c27b0)

Βασικοί μεταβλητοί ορισμοί $

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

Με άλλα λόγια, αυτό σημαίνει ότι η τελική τιμή του μεταβλητού $ κειμένου από αυτό το παράδειγμα θα εξακολουθεί να είναι "Piece of string".

Η δεύτερη αντιστοίχιση "Μια άλλη συμβολοσειρά." Αγνοείται, επειδή υπάρχει ήδη μια προεπιλεγμένη τιμή.

Οι μεταβλητές Sass $ μπορούν να αντιστοιχιστούν σε οποιαδήποτε ιδιότητα CSS

Φυτευμένοι κανόνες

Με το τυπικό CSS, τα ένθετα στοιχεία έχουν πρόσβαση μέσω χαρακτήρα διαστήματος:

Τοποθέτηση με το πρότυπο CSS

Ο παραπάνω κώδικας μπορεί να εκφραστεί με τους κανόνες Nested του Sassy ως εξής:

Κανόνες που έχουν ενσωματωθεί - Η εμφάνιση του Sassy εμφάνισης φαίνεται λιγότερο επαναλαμβανόμενη.

Φυσικά, στο τέλος, όλα συγκεντρώνονται στο κανονικό CSS. Είναι μια άλλη σύνταξη.

Όπως μπορείτε να δείτε αυτή η σύνταξη εμφανίζεται καθαρότερη και λιγότερο επαναλαμβανόμενη.

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

Πίσω από το πέπλο, ο προ-επεξεργαστής εξακολουθεί να μεταγλωττίζει αυτό στον κανονικό κώδικα CSS (που φαίνεται παραπάνω), έτσι ώστε να μπορεί να αποτυπωθεί στο πρόγραμμα περιήγησης. Απλά αλλάζουμε τον τρόπο γραφής του CSS.

Ο χαρακτήρας

Το SSSY CSS προσθέτει την οδηγία χαρακτήρων & (και).

Ας ρίξουμε μια ματιά στο πώς λειτουργεί!

Χρήση οδηγίας & χαρακτήρα

Στη γραμμή 5 ο χαρακτήρας & & χρησιμοποιήθηκε για να καθορίσει &: να μετακινηθεί και να μετατραπεί στο όνομα του γονικού στοιχείου a μετά τη σύνταξη.

Έτσι, ποιο ήταν το αποτέλεσμα του παραπάνω κώδικα SCSS όταν μετατράπηκε σε CSS;

Αποτέλεσμα - Το SCSS μετατράπηκε σε CSS

Ο χαρακτήρας & μετατρέπεται απλά στο όνομα του γονικού στοιχείου και γίνεται: hover στην περίπτωση αυτή.

Mixins

Μια ανάμικτη ορίζεται από την οδηγία @mixin (ή επίσης γνωστή ως κανόνας mixin)

Ας δημιουργήσουμε το πρώτο @mixin που ορίζει την προεπιλεγμένη συμπεριφορά Flex:

Mixins

Τώρα κάθε φορά που εφαρμόζετε τάξη .centered-elements σε ένα στοιχείο HTML, θα μετατραπεί σε Flexbox. Ένα από τα βασικά πλεονεκτήματα των mixins είναι ότι μπορείτε να τα χρησιμοποιήσετε μαζί με άλλες ιδιότητες του CSS.

Εδώ, πρόσθεσα επίσης σύνορα: 1px στερεό γκρι? σε κεντρικά στοιχεία εκτός από το mixin.

Μπορείτε ακόμη να μεταφέρετε τα επιχειρήματα σε ένα @ mixin σαν να ήταν μια συνάρτηση και στη συνέχεια να τα αντιστοιχίσετε σε ιδιότητες CSS. Θα ρίξουμε μια ματιά σε αυτό στο επόμενο τμήμα.

Παράδειγμα πολλαπλών περιηγητών

Ορισμένα πειραματικά χαρακτηριστικά (όπως το -webkit-based) ή το Firefox (-moz-based) λειτουργούν μόνο στα προγράμματα περιήγησης στα οποία εμφανίζονται.

Τα Mixins βοηθούν στον ορισμό των ιδιότητων CSS του browser-agnostic σε μία κατηγορία.

Για παράδειγμα, αν πρέπει να περιστρέψετε ένα στοιχείο σε προγράμματα περιήγησης που βασίζονται στο Webkit, καθώς και σε άλλα, μπορείτε να δημιουργήσετε αυτό το mixin που παίρνει ένα argument $ degree:

Browser-agnostic @mixin για τον προσδιορισμό της γωνίας περιστροφής.

Τώρα το μόνο που πρέπει να κάνουμε είναι @ να συμπεριλάβουμε αυτό το mixin στον ορισμό της κλάσης CSS:

Περιστρέψτε σύμφωνα με όλα τα προγράμματα περιήγησης.

Αριθμητικοί χειριστές

Παρόμοια με την τυπική σύνταξη CSS, μπορείτε να προσθέσετε, να αφαιρέσετε, να πολλαπλασιάσετε και να διαιρέσετε τις τιμές χωρίς να χρειαστεί να χρησιμοποιήσετε τη λειτουργία calc () από την κλασική σύνταξη CSS.

Αλλά υπάρχουν μερικές μη εμφανείς περιπτώσεις που μπορεί να προκαλέσουν λάθη.

Πρόσθεση

Προσθήκη τιμών χωρίς χρήση της λειτουργίας calc ()

Απλά βεβαιωθείτε ότι και οι δύο τιμές παρέχονται σε μορφή που ταιριάζει.

Αφαίρεση

Ο χειριστής αφαίρεσης λειτουργεί με τον ίδιο τρόπο όπως και η προσθήκη.

Αφαίρεση διαφορετικού τύπου τιμών

Πολλαπλασιασμός

Το αστέρι χρησιμοποιείται για τον πολλαπλασιασμό. Ακριβώς όπως και με calc (a * b) στο πρότυπο CSS.

Πολλαπλασιασμός και διαίρεση

Διαίρεση

Η διαίρεση είναι λίγο δύσκολη. Επειδή στο πρότυπο CSS το σύμβολο διαίρεσης προορίζεται για χρήση μαζί με κάποιες άλλες ιδιότητες βραχείας χεριού. Για παράδειγμα, η γραμματοσειρά: 24 / 32px ορίζει μια γραμματοσειρά με μέγεθος 25px και ύψος γραμμής 32px. Αλλά το SCSS ισχυρίζεται ότι είναι συμβατό με το πρότυπο CSS.

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

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

Υπόλοιπο

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

Δημιουργία λωρίδων Zebra.

Ας ξεκινήσουμε με τη δημιουργία ενός ζέβρα mixin.

Σημείωση: οι κανόνες @for και @if συζητούνται σε μια επόμενη ενότητα.

Αυτό το demo απαιτεί τουλάχιστον λίγα στοιχεία HTML:

HTML πηγαίο κώδικα για αυτό το πείραμα mixin.

Και εδώ είναι το αποτέλεσμα του προγράμματος περιήγησης:

Λωρίδα Zebra που παράγεται από το μίγμα ζέβρας.

Σύγκριση φορέων

Σύγκριση φορέων

Πώς μπορούν να χρησιμοποιηθούν στην πράξη πρακτορεία σύγκρισης; Μπορούμε να προσπαθήσουμε να γράψουμε ένα @mixin που θα επιλέξει το μέγεθος του padding αν είναι μεγαλύτερο από το περιθώριο:

Σύγκριση φορέων σε δράση.

Μετά την καταγραφή θα φτάσουμε σε αυτό το CSS:

Αποτέλεσμα της μίξης υπό όρους διαχωρισμού

Λογικοί χειριστές

Λογικοί χειριστές.Χρησιμοποιώντας λογικούς χειριστές Sass

Δημιουργεί μια κλάση χρώματος κουμπιών που αλλάζει το χρώμα φόντου βάσει του πλάτους της.

Χορδές

Σε ορισμένες περιπτώσεις, είναι δυνατή η προσθήκη συμβολοσειρών σε έγκυρες τιμές CSS, εφόσον η προστιθέμενη συμβολοσειρά τελειώνει:

Συνδυασμός κανονικών τιμών ιδιοτήτων CSS με συμβολοσειρές Sass / SCSS.

Το παρακάτω παράδειγμα, από την άλλη πλευρά, θα προκαλέσει σφάλμα σύνταξης:

Αυτό το παράδειγμα δεν θα λειτουργήσει.

Μπορείτε να προσθέσετε στοιχειοσειρές μαζί χωρίς διπλά εισαγωγικά, αρκεί η συμβολοσειρά να μην περιέχει κενά. Για παράδειγμα, το ακόλουθο παράδειγμα δεν θα συγκεντρωθεί:

Αυτό το παράδειγμα δεν θα λειτουργήσει. Λύση?Οι χορδές που περιέχουν διαστήματα πρέπει να τυλίγονται σε εισαγωγικά.Προσθήκη πολλών συμβολοσειρών.Προσθήκη αριθμών και συμβολοσειρών.
Σημείωση: η ιδιότητα περιεχομένου λειτουργεί μόνο με ψευδοεπιλογές: πριν και μετά. Συνιστάται να αποφεύγετε τη χρήση της ιδιότητας περιεχομένου στους ορισμούς CSS και αντί να καθορίζετε πάντοτε περιεχόμενο μεταξύ ετικετών HTML. Εδώ, εξηγείται μόνο στο πλαίσιο της εργασίας με χορδές στο Sass / SCSS.

Ρυθμίσεις ελέγχου ροής

Το SCSS έχει λειτουργίες () και @ διευθύνσεις (επίσης γνωστές ως κανόνες). Έχουμε ήδη δημιουργήσει έναν τύπο συνάρτησης όταν εξετάσαμε τα mixins. Θα μπορούσατε να περάσετε επιχειρήματα σε αυτό.

Μια συνάρτηση συνήθως έχει μια παρένθεση προσαρτημένη στο τέλος του ονόματος της λειτουργίας. Μια οδηγία / κανόνας ξεκινάει με ένα χαρακτήρα @.

Όπως και σε JavaScript ή σε άλλες γλώσσες, το SCSS σάς επιτρέπει να εργάζεστε με το πρότυπο σύνολο δηλώσεων ροής ελέγχου.

αν()

if () είναι μια συνάρτηση.

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

@αν

@if είναι μια οδηγία που χρησιμοποιείται για να ξεχωρίζει με βάση μια συνθήκη.

Αυτή η εντολή Sassy if μεταγλωττίζεται σε:

Παράδειγμα χρήσης μιας ενιαίας εντολής if-και μιας combo if-else.

Έλεγχος αν ο γονέας υπάρχει

Το σύμβολο AND θα επιλέξει το γονικό στοιχείο, αν υπάρχει. Ή να επιστρέψετε με άλλο τρόπο. Ως εκ τούτου, μπορεί να χρησιμοποιηθεί σε συνδυασμό με μια οδηγία @if.

Στα ακόλουθα παραδείγματα, ας ρίξουμε μια ματιά στο πώς μπορούμε να δημιουργήσουμε υπό όρους CSS στυλ με βάση το αν υπάρχει το γονικό στοιχείο ή όχι.

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

@Για

Ο κανόνας @for χρησιμοποιείται για την επανάληψη των ορισμών CSS πολλές φορές στη σειρά.

για-βρόχο ανατροπής πάνω από 5 στοιχεία.

συμπέρασμα

Ελπίζω ότι αυτό το άρθρο σας έχει δώσει μια κατανόηση του SCSS / SASS. Εάν έχετε οποιεσδήποτε ερωτήσεις, τα δημοσιεύστε στα σχόλια.