Μέχρι τώρα είμαι βέβαιος ότι έχετε ακούσει για το Sass και πώς "πρέπει πραγματικά να αρχίσετε να το χρησιμοποιείτε!"

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

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

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

$i: 6;@while $i > 0 {.item-#{$i}  {width: 2em * $ i;  } $ i: $ i - 2}} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11 

και σκέφτηκε, "Whatttttttttttt; Ευχαριστώ, αλλά θα κρατήσω το κανονικό μου CSS. "

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

Η εγκατάσταση του Sass για ένα έργο είναι λίγο πέρα ​​από το πεδίο εφαρμογής αυτού του άρθρου, αλλά η εγκατάσταση είναι σχετικά εύκολη και ο ιστότοπος Sass έχει οδηγίες για Linux, Mac ή PC. Το δροσερό πράγμα είναι, μόλις εγκατασταθεί, μπορείτε να πάρετε οποιοδήποτε αρχείο CSS έχετε και να το μετονομάσετε .scss κάνοντας το αρχείο Sass.

Όλα τα σωστά μορφοποιημένα CSS είναι έγκυρα Sass!

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

1. Μεταβλητές

Τι είναι αυτό το κύριο χρώμα κεφαλίδας ξανά; Πώς μπορώ να γράψω αυτή τη στοίβα; Πόσες φορές γράφετε το CSS και έπρεπε να ψάξετε μέσα από τα προηγούμενα στυλ για μια τιμή ή έπρεπε να σπάσετε το dropper χρώματος, ξανά για να μάθετε ότι το δεκαεξαδικό χρώμα;

Το Sass παρέχει μεταβλητές ως τρόπο αποθήκευσης πληροφοριών που θέλετε να επαναχρησιμοποιήσετε σε όλο το φύλλο στυλ. Τώρα μπορείτε να αποθηκεύσετε αυτήν την τιμή χρώματος ή τη μεγάλη στοίβα γραμματοσειρών ως κάτι που μπορείτε να το θυμάστε. Ο τρόπος με τον οποίο δηλώνετε μια μεταβλητή είναι με ένα σύμβολο δολαρίου $ ακολουθούμενο από το όνομα. Αυτό το όνομα μπορεί να είναι ό, τι θέλετε να είναι. Στη συνέχεια πληκτρολογείτε ένα παχύ έντερο : ακολουθούμενη από την τιμή και ένα ημίξηλο-κόλον ; :

$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;

Τώρα, εάν θέλετε να χρησιμοποιήσετε μία από αυτές τις τιμές, μπορείτε απλά να χρησιμοποιήσετε τη μεταβλητή.

.mySelector { font-family: $mainFont; color: $mainColor; }

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

2. @import

Τώρα μπορεί να λέτε στον εαυτό σας "το CSS έχει @import, δεν είναι τόσο δροσερό" και θα είχατε δίκιο, αλλά οι εκδόσεις CSS και Sass διαφέρουν σημαντικά. Σε κανονικό CSS @import τραβάει άλλα φύλλα στυλ αλλά κάνει αυτό κάνοντας ένα άλλο αίτημα HTTP, κάτι που συνήθως θέλουμε να αποφύγουμε. Για αυτόν τον λόγο ενδέχεται να μην χρησιμοποιήσατε ακόμα @import. Ο Sass, από την άλλη πλευρά, είναι ένας προεπεξεργαστής (έμφαση στην προ) που θα τραβήξει σε αυτό το αρχείο πριν να συντάξει το CSS.

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

Τι είναι μερικό; Ακριβώς αυτά που ακούγονται. Είναι μερικά αρχεία Sass που περιέχουν μικρά αποσπάσματα CSS που μπορείτε να συμπεριλάβετε σε άλλα αρχεία Sass. Ονομάζονται με τη χρήση ενός κύριου υπογραμμιστή ακολουθούμενου από ένα όνομα. _myFile.scss . Η υπογράμμιση επιτρέπει στον Sass να γνωρίζει ότι το αρχείο είναι μόνο ένα μερικό αρχείο και ότι δεν πρέπει να μεταγλωττιστεί σε CSS. Για να εισαγάγετε αυτό το μερικό, απλά πρέπει να προσθέσετε το @import στο αρχείο σας έτσι όπως:

@import 'partials/myPartial';

Επομένως, εισάγω το _myPartial.scss που βρίσκεται σε ένα φάκελο που ονομάζεται partials. Δεν χρειάζεται να συμπεριλάβετε την υπογράμμιση ή την επέκταση αρχείου. Ο Sass είναι αρκετά έξυπνος για να μάθετε ποιο αρχείο εννοείτε. Η χρήση των μερών μας επιτρέπει έναν εξαιρετικό τρόπο να διαμορφώσουμε τον κώδικα μας, καθιστώντας τον πιο φορητό και πιο εύκολο στη συντήρησή του.

3. Χρωματικές λειτουργίες

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

//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)

Η σύνταξη είναι αρκετά ευθεία προς τα εμπρός. Στις τρεις παραπάνω λειτουργίες βλέπουμε ότι έχουμε δύο επιχειρήματα για καθένα. Το πρώτο είναι το χρώμα που θέλουμε να χειριστούμε. Αυτό μπορεί να είναι δεκαεξαδικό, RGB ή οποιαδήποτε μορφή χρώματος που είναι σωστή CSS. Μπορεί ακόμη και να είναι μια μεταβλητή. Το δεύτερο είναι το ποσό που θέλουμε να τροποποιήσουμε αυτό το χρώμα. Κάντε 10% σκούρο, ελαφρύτερο κατά 5%, Ρυθμίστε το alpha στο 0,6. Το αποτέλεσμα αυτής της συνάρτησης είναι η τιμή που έχει οριστεί στο CSS. Έτσι κάτω κάτω βλέπετε τις λειτουργίες μας στην εργασία

//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}

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

4. Ανάμιξη

Μερικά πράγματα στο CSS είναι λίγο κουραστικά να γράψω. Οι Mixins κάνουν ομάδες δηλώσεων CSS ότι μπορούμε να επαναχρησιμοποιήσουμε σε ολόκληρο τον ιστότοπό μας. Τα στυλ CSS3 που απαιτούν προθέματα προμηθευτών είναι ένα τέλειο παράδειγμα του πότε να χρησιμοποιήσετε ένα mixin. Αντί να πληκτρολογούμε την ίδια ιδιότητα ξανά και ξανά γράφουμε ένα mixin μία φορά τότε καλέστε εκείνο το mixin οποτεδήποτε θέλουμε να το χρησιμοποιήσουμε. Για να δηλώσουμε ένα mixin χρησιμοποιούμε το @mixin λέξη-κλειδί. Στη συνέχεια το δώστε ένα όνομα και εφαρμόστε τα στυλ μας ανάμεσα στις σγουρές σανίδες:
@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Τα επιχειρήματα μπορούν ακόμη να μεταφερθούν στο mixin για να το κάνουν πιο ευέλικτο. Για να χρησιμοποιήσουμε το mixin μας χρησιμοποιούμε μόνο το @include λέξη-κλειδί.

//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

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

5. @extend

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

.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}

Άνθρωπος, πόσο φοβερό είναι να μην χρειάζεται να επαναλάβεις τον εαυτό σου; Όχι μόνο αυτό προωθεί την modularization των στυλ μας, αλλά μειώνει τον κίνδυνο των στυλ να διακόπτεται από κουμπί σε κουμπί. Αυτό είναι ένας τεράστιος χρόνος κερδίστε! Πολλαπλασιάστε αυτό για όλα τα στυλ του ιστότοπου και έχουμε ένα σημαντικά μειωμένο χρονικό πλαίσιο για τη γραφή του CSS.

Heck, με όλη την ώρα που σώζουμε ίσως μπορούμε να μάθουμε τις πιο περίπλοκες πτυχές του Sass.

Σύνοψη και περαιτέρω ανάγνωση

Ελπίζω να σας πείσω να δώσετε αυτό το εκπληκτικό εργαλείο σε έναν πυροβολισμό και να απεικονίσετε ορισμένα χαρακτηριστικά που θα μπορούσαν να βελτιώσουν την παραγωγικότητά σας αμέσως. Η αλήθεια είναι ότι θα μπορούσα να γράψω αυτό το άρθρο και πάλι αύριο και να έχουν πέντε ακόμα πολύ καλά χαρακτηριστικά για να τα μοιραστώ. Είναι ακριβώς αυτό το φοβερό! Sass (και άλλοι προεπεξεργαστές) είναι εδώ για να παραμείνουν έτσι κάνετε μόνοι σας μια χάρη και να αρχίσετε να το χρησιμοποιείτε. Για όσους ενδιαφέρονται να μάθουν περισσότερα ελέγξτε αυτούς τους πόρους στο twitter και στο Web:

Twits:

Webs:

Και αν βρίσκεστε στην περιοχή της Νότιας Φλώριδας Tri-νομός έρχονται μαζί μας στο Νότια Φλόριντα Sass Meetup .