Στυλ μια τοποθεσία χρησιμοποιώντας SASS

Μπορείτε να κάνετε πολλά με το CSS - ίσως περισσότερο από ό, τι μπορείτε να σκεφτείτε - αλλά η σεβαστή γλώσσα του φύλλου στυλ έχει τους περιορισμούς του. Σε ένα σύγχρονο έργο ιστού, με μονάδες NPM, JavaScript πλαίσια, ES6 και πολλά άλλα, μπορεί να αισθανθεί κάπως αναχρονιστικό να πέσει πίσω στη γραφή της βανίλιας CSS.

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

Sass (συντακτικά φοβερό φύλλο στυλ) είναι ένα από τα πιο δημοφιλή από αυτές τις επιλογές - Διαβάστε περισσότερα με τον οδηγό μας Τι είναι η SASS; Η Sass προσθέτει πολλές πολύτιμες νέες λειτουργίες γλώσσας που δεν είναι (επί του παρόντος) στο CSS για να βοηθήσουν οι ιστότοποί και οι εφαρμογές σας πιο διατηρητέες. Αυτά περιλαμβάνουν τα πράγματα όπως τα mixins και τις οδηγίες ελέγχου, που ακούγονται αποθαρρυντικά αλλά είναι πραγματικά αρκετά απλά, και θα το εξετάσουμε σε αυτό το σεμινάριο. Αν θέλετε να κρατήσετε τα πράγματα ακόμα πιο απλούστερα, θα μπορούσατε να είστε χρήστης α οικοδόμος ιστότοπου .

• Cool css κινούμενα σχέδια για να αναδημιουργήσετε

Υπάρχουν στην πραγματικότητα δύο διαφορετικές σύνταξη για τη SASS, η οποία χρησιμοποιεί μια επέκταση αρχείου .ssss και ένα που χρησιμοποιεί .Sass. Ο πρώτος μοιάζει περισσότερο με το CSS (στην πραγματικότητα, όλα τα αρχεία .css ισχύουν τα αρχεία. Θα επικεντρωθούμε σε .scs, αλλά η επιλογή είναι απλά κάτω από την προσωπική προτίμηση. Αναβάθμιση του ιστότοπού σας; Βεβαιωθείτε ότι έχετε web hosting Η υπηρεσία κάνει αυτό που το χρειάζεστε, και να πάρετε το δικό σας αποθήκευση σύννεφων σωστά.

Κατεβάστε τα αρχεία για αυτό το σεμινάριο εδώ (έκδοση 282)

01. Ρυθμίστε τον μεταγλωττιστή

Η χρήση της SASS απαιτεί ουσιαστικά έναν μεταγλωττιστή. Ο απλούστερος τρόπος για να γίνει αυτό θα ήταν στη γραμμή εντολών. Μπορείτε να το κάνετε χρησιμοποιώντας το Homebrew. Ο πίνακας Sass υλοποιείται σε πολλές διαφορετικές γλώσσες και η homebrew θα εγκαταστήσει την έκδοση DART, η οποία είναι γρήγορη.

brew install sass/sass/sass

02. Δημιουργήστε ένα αρχείο sass

Ας προσπαθήσουμε να δημιουργήσουμε ένα απλό αρχείο sass για να δείτε τον μεταγλωττιστή σε δράση. Μία από τις απλούστερες έννοιες στη SASS είναι μεταβλητές, οι οποίες μπορούν να καθοριστούν μία φορά με ένα $ Πρόθεμα και στη συνέχεια χρησιμοποιούνται σε όλο τον κωδικό σας. Θα δημιουργήσουμε sass-input.scss .

 $ Κείμενο-Χρώμα: #CCCCC;
σώμα {
    Χρώμα: $ κείμενο-χρώμα;
} 

03. Σύνταξη γραμμής εντολών

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

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Αυτοματοποιήστε την κατασκευή σας

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

 MKDIR SRC
mkdir src / sass
mkdir κοινό
Mkdir Public / CSS
SASS - Watch SRC / SASS /: Δημόσια / CSS /

05. Παίξτε με sass styling

Τώρα ας δούμε μια απλή περιοχή εκκίνησης, την οποία μπορούμε να χρησιμοποιήσουμε για να παίξουμε γύρω με sass styling. Μπορούμε να ξεκινήσουμε με κλωνοποίηση ενός ιστότοπου unstyled shape. Το βασικό πράγμα που πρέπει να σημειώσετε είναι ότι η σελίδα HTML δεν ξέρει τίποτα για τη Sass. Έχει ένα ενιαίο σημείο εισόδου αρχείων CSS, το οποίο θα δημιουργήσουμε στη συνέχεια.

 CD κοινό
Curl -o Index.HTML HTTPS: // RAW.
gitubusercontent.com/simon-a-j/sass-
φροντιστήριο/
master / public / index.html 

06. Το κύριο φύλλο στυλ

Χρησιμοποιούμε Styles.css ως κύριο σημείο εισόδου CSS, το οποίο αργότερα θα χρησιμοποιήσουμε για να εισαγάγει άλλες μονάδες. Αυτό σημαίνει ότι πρέπει να πούμε τη Sass να δημιουργήσει αυτό το αρχείο, οπότε πρέπει επίσης να δημιουργήσουμε ένα αρχείο styles.scss στο φάκελο SRC / SASS. Αν τρέχετε sass - watch Όπως και πριν, αυτό θα καταρτιστεί αυτόματα στο CSS στο Δημόσια / CSS Φάκελος και ανανέωση του ιστότοπού σας θα δείξει τις αλλαγές της. Δοκιμάστε να κάνετε μερικές τροποποιήσεις και να αναζωογονήσετε τη σελίδα HTML στο πρόγραμμα περιήγησης όπως πηγαίνετε.

 // Styles.scss
σώμα {
  Οικογένεια γραμματοσειράς: Sans-Serif.
  Κείμενο-Ευθυγράμμιση: Κέντρο;
}

07. Διαχείριση χρωμάτων

Ας δούμε πώς η Sass μπορεί να μας βοηθήσει να διαχειριστούμε ένα χρωματικό σχήμα για τον ιστότοπο. Είναι κοινό να έχετε μια παλέτα πέντε ή έξι χρώματα για μια ιστοσελίδα. Μπορούμε να το προσωποποιήσουμε _colours.scss . Το πρόθεμα υπογράμμισης λέει τη SASS να μην το καταρτίσει σε ένα νέο αρχείο HTML (ένα «μερικό»). Αλλά μπορούμε να το χρησιμοποιήσουμε με ελαφρώς διαφορετικό τρόπο.

 // _colours.scss
$ χρώμα-πρωτεύον: # 231651;
$ χρώμα δευτεροβάθμιας: # 2374AB;
$ color-light: # d6fff6;
$ color-highlight1: # 4dccbd;
$ color-highlight2: # ff8484;

08. Χρησιμοποιήστε μεταβλητές χρώματος

Για να χρησιμοποιήσετε αυτές τις μεταβλητές χρώματος που μόλις δημιουργήσαμε, μπορούμε να πούμε Sass να εισαγάγει το περιεχόμενο του _colours.scss στο κύριο φύλλο στυλ μας. Το κάνουμε αυτό χρησιμοποιώντας ένα @εισαγωγή δήλωση. Μόλις το κάνετε αυτό, παρατηρήστε πώς επιλύονται οι μεταβλητές στο αρχείο εξόδου CSS.

 // Styles.scss
@ import "_colours.scss";
σώμα {
  Οικογένεια γραμματοσειράς: Sans-Serif.
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  Ιστορικό: γραμμική κλίση (155deg,
$ χρώμα-πρωταρχικό 70%, $ χρώμα δευτερογενούς
70%).
  Χρώμα: $ χρώμα-φως?
  min-Ύψος: 100VH;
}
h1 {
    Χρώμα: $ color-highlight1;
}
h2 {
  Χρώμα: $ color-highlight2;
}

09. Στυλ φωλιά

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

 Α {
  Χρώμα: $ χρώμα δευτεροβάθμιας;
}
.profile-header {
  ένα {
    Μέγεθος γραμματοσειράς: 16px;
    Περιθώριο: 10px;
    περιθώριο-δεξί: 10px;
    Padding: 10px;
    Ακτίνα συνοριακής ακτίνας: 5px;
    Χρώμα: $ χρώμα-φως?
    Ιστορικό-Χρώμα: $ Χρώμα-δευτεροβάθμια;
  }
}

10. Κάντε την ανταποκρινόμενη πλέγμα

Τώρα ας κανονίσουμε το περιεχόμενό μας σε μια ανταποκρινόμενη μορφή πλέγματος. Η Sass έχει μερικά χαρακτηριστικά για να γίνει αυτό σημαντικά πιο εύκολο να διαχειριστεί. Εκτός από τη χρήση μεταβλητών για να καθορίσουμε τα σημεία διακοπής μας, μπορούμε να φωλιάζουμε @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ Ερώματα σε άλλα στυλ, τα οποία καθιστούν τη συμπεριφορά ειδικά για το μέγεθος της οθόνης πολύ πιο αναγνώσιμο.

 $ Σήμα: 800PX;
.profile-body {
  Εμφάνιση: Flex;
  Ευθυγράμμιση-αντικείμενα: Τεντώστε;
  Δικαιολογήστε-περιεχόμενο: χώρος-γύρω.
  Περιθώριο: 32px;
  Περιθώριο: 10VW;
  Περιθώριο-δεξί: 10VW;
  @ οθόνη @media και (μέγιστο πλάτος:
$ σπάσιμο) {
      Κατευθυντήριες γραμμές: στήλη;
  }
}
.profile-section {
  Ιστορικό-χρώμα: $ color-highlight1;
  Χρώμα: $ χρώμα-πρωτεύον.
  Περιθώριο: 16px;
  Ακτίνα συνοριακής ακτίνας: 10px;
  Πλάτος: 340px;
  .profile-περιεχόμενο {
    Padding: 20px;
  }
  @ οθόνη @media και (μέγιστο πλάτος:
$ σπάσιμο) {
    Πλάτος: 100%.
  }
}

11. Εισαγωγή μιγμάτων

Οι Mixins είναι ένα άλλο ισχυρό χαρακτηριστικό SASS, το οποίο μπορείτε να σκεφτείτε ως έναν τρόπο καθορισμού επαναχρησιμοποιήσιμων λειτουργιών φύλλου στυλ. Ένα mixin ορίζεται μία φορά, μπορεί να πάρει παραμέτρους και στη συνέχεια μπορεί να επικαλεστεί οπουδήποτε στον κωδικό SASS. Μια περίπτωση χρήσης για αυτό είναι να χειριστεί το πρόθεμα προμηθευτών. Αν θέλουμε ένα CSS να μεταμορφώσει να εργαστεί σε παλαιότερα προγράμματα περιήγησης, αυτό μπορεί να απαιτήσει ένα -Webkit Πρόθεμα για το Chrome και το Safari, για παράδειγμα. Ας ορίσουμε ένα mixin που φροντίζει αυτό για εμάς.

12. Μείγματα και μεταβλητές

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

 $ STELL1: (νέα στοιχεία: $ Color-Light,
Ιστορικό: $ χρώμα δευτεροβάθμιας);
$ style2: (προσκήνιο: $ χρώμα-πρωταρχικό,
Ιστορικό: $ color-highlight1);
$ style3: (νέα στοιχεία: $ color-colors,
Ιστορικό: $ color-highlight2);
@ στυλ περιεχομένου ($ προσκήνιο,
$ φόντο) {
  Χρώμα: $ προσκήνιο;
  Ιστορικό-Χρώμα: $ Ιστορικό?
} 

13. Χρησιμοποιήστε το νέο σας Mixin

 .Profile-header {
  ένα {
    @include στυλ περιεχομένου ($ style1 ...);
    // ...
  }
}
.profile-section {
    @include στυλ περιεχομένου ($ style2 ...);
  // ...
}

14. Κατανόηση της κληρονομιάς

Ένα άλλο πολύ ισχυρό χαρακτηριστικό της Sass είναι η κληρονομιά. Αυτή τη στιγμή έχουμε δύο διαφορετικά στυλ για συνδέσμους στη σελίδα μας. Αν θέλουμε να χρησιμοποιήσουμε κοινά στυλ και όχι και όχι την αντιγραφή και την επικόλληση του CSS, γιατί δεν χρησιμοποιούμε μια κλάση θέσης θέσης, που δηλώνεται με το «%», το οποίο μπορεί να επεκταθεί και από τους δύο, επιτρέποντάς τους να κληρονομήσουν τα στυλ της;

% κοινόχρηστο σύνδεσμο {
  Μέγεθος γραμματοσειράς: 16px;
  Περιθώριο: 10px;
  περιθώριο-δεξί: 10px;
  Padding: 10px;
  Ακτίνα συνοριακής ακτίνας: 10px;
}

15. Επέκταση των τάξεων

Τώρα μπορούμε να επεκτείνουμε την κοινή κατηγορία Link για να ορίσετε το Styling Link σε όλο τον ιστότοπό μας. Αυτό αρχίζει να φαίνεται αρκετά κομψό. Ορίζουμε τι ένας σύνδεσμος γενικά μοιάζει με μόλις μία φορά, επαναχρησιμοποιήστε το όλο και καθορίζει τα χρώματα από την παλέτα για κάθε σύνδεσμο χρησιμοποιώντας ένα mixin.

 .Profile-header {
  ένα {
    @extend% κοινόχρηστο σύνδεσμο;
    @include στυλ περιεχομένου ($ style1 ...);
  }
}
ένα {
  @extend% κοινόχρηστο σύνδεσμο;
  @include περιεχόμενο-στυλ ($ style3 ...);
}

16. Τροποποιήστε το θέμα

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

 // _colours.scss
$ COLOR-PRIMPER: # 2E1F27;
$ Χρώμα-δευτεροβάθμια: φωτισμός ($ χρώμα-πρωτεύον,
25%).
$ Color-Light: Lighten ($ Color-Primary,
75%).
$ color-highlight1:
φωτισμό (συμπλήρωμα ($ χρώμα-πρωτεύον), 50%).
$ color-highlight2:
ελαφρύ (συμπλήρωμα ($ color-δευτέρας), 50%).

17. Επιλέξτε ένα νέο σύνολο χρωμάτων

Τώρα, μπορούμε να τροποποιήσουμε ολόκληρο το σχήμα χρωμάτων για τον ιστότοπο απλά, καθορίζοντας μια νέα χρωματική-πρωταρχική αξία στο _colours.scss αρχείο. Προσπαθήστε να δοκιμάσετε πειραματίζοντας με εναλλακτικά χρώματα. Θα μπορούσαμε επίσης να το τυχαιρήσουμε (αλλά να θυμάστε ότι αυτό αναφέρεται στο σημείο στο οποίο είναι χτισμένο ο ιστότοπός σας, όχι χρόνος εκτέλεσης). Μπορείτε επίσης να δοκιμάσετε να προσαρμόσετε τη λογική που χρησιμοποιούμε για να αντλήσετε τα άλλα χρώματα στο θέμα από την πρωτεύουσα.

 $ κόκκινο: τυχαίο (255);
$ πράσινο: τυχαίο (255);
$ μπλε: τυχαίο (255);
$ Color-Primary: RGB ($ κόκκινο, $ πράσινο, $ μπλε); 

18. Χρησιμοποιήστε τις βιβλιοθήκες

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

 Git Clone https://github.com/Josephfusco/
Angled-Edges.git Src / Sass / Langed-Edges

19. Οι γωνιακοί άκρες αναμιγνύονται

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

 @ import "ακουστικά άκρα / _angled-edges.scsss";
.profile-section {
  @include γωνία-άκρη ("έξω από κάτω",
"Κάτω δεξιά", $ color-highlight1).
  @include γωνιακό άκρο ("έξω από την κορυφή",
"Άνω δεξιά", $ color-highlight1).
  Περιθώριο: 120px 16px 120px 16px;
  // ...
}

20. Μορφοποίηση εξόδου

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

 SASS SRC / SASS /: Δημόσια / CSS / --Style
συμπιεσμένο 

21. Περισσότερα SASS

Τώρα διερευνήσαμε αρκετά χαρακτηριστικά της Sass, και ο ιστότοπός μας δεν φαίνεται πολύ κακός. Ας ελπίσουμε ότι αρχίζετε να βλέπετε πώς η Sass μας βοηθά να αναπτύξουμε πιο συντηρητέα φύλλα στυλ. Δεν έχουμε καλύψει κάθε χαρακτηριστικό της γλώσσας - υπάρχουν πολλές πιο χρήσιμες λειτουργίες που αποστέλλονται μαζί του και τα προηγμένα χαρακτηριστικά όπως οδηγίες ελέγχου (όπως @αν , @Για και @ενώ ) που χρησιμοποιούνται συχνά για τη δημιουργία σύνθετων λειτουργιών βιβλιοθήκης. Συνολικά, θυμηθείτε ότι η Sass είναι εξ ολοκλήρου μια στυλιστική προτίμηση. Μπορείτε να κάνετε ό, τι έχουμε δει με καθαρά css αν θέλετε, αλλά θα πρέπει σίγουρα να σκεφτείτε την προεπεξεργασία καθώς το έργο σας γίνεται πιο περίπλοκο.

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 282 του Σχεδιαστής ιστοσελίδων . Αγορά Τεύχος 282 ή Εγγραφείτε εδώ .

Διαβάστε περισσότερα:

• 10 εκπληκτικές νέες τεχνολογίες CSS
• 3 λαμπερά νέα ακίνητα CSS για να δοκιμάσετε σήμερα
• Μεγάλες ιστοσελίδες κύλισης Parallax