Ξεκινώντας με την εγκατάσταση του Sass και τα βασικά στοιχεία

Σε αυτή τη θέση, πρόκειται να συζητήσουμε έναν Preprocessor CSS που ονομάζεται Sass ή Συντακτικά φοβερά φύλλα στυλ.

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

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

Πριν μπορέσουμε να συνθέσουμε το Sass, πρέπει να το εγκαταστήσουμε. Το Sass βασίζεται στον Ruby. Εάν εργάζεστε σε Mac, είναι πιθανό ότι έχετε ήδη εγκαταστήσει το Ruby. Αν μπορείτε να εγκαταστήσετε το Ruby στα Windows, χρησιμοποιήστε αυτό το Ruby Installer.

Μετά την ολοκλήρωση της εγκατάστασης, μπορείτε να μεταβείτε στο Terminal (σε Mac) ή στη γραμμή εντολών (στα Windows), στη συνέχεια πληκτρολογήστε την ακόλουθη γραμμή εντολών:

Σε Mac.

 sudo gem εγκαταστήσετε sass 

Στα Windows.

 gem install sass 

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

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

 sass - διαδρομή παρακολούθησης / sass-directory 

Η γραμμή εντολών παραπάνω θα παρακολουθήσει κάθε .scss/ /.sass αρχεία σε path / directory και κάθε φορά που αλλάζει ένα από τα αρχεία στον κατάλογο, η Sass θα ενημερώσει τα αντίστοιχα αρχεία ή θα δημιουργήσει ένα αν δεν υπάρχει.

Αν χρειαζόμαστε Sass για να δημιουργήσουμε τα αρχεία σε έναν συγκεκριμένο κατάλογο, μπορούμε να το κάνουμε αυτό.

 sass - διαδρομή παρακολούθησης / sass-directory: path / css-directory 

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

 sass - διαδρομή παρακολούθησης / sass-directory / styles.css 

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

Περαιτέρω ανάγνωση: Αυτόματη συμπίεση αρχείων Sass με Sass 3

Εφαρμογές Sass

Ωστόσο, αν σας μισεί η εργασία μέσω του Terminal ή της Command Prompt, μπορείτε να χρησιμοποιήσετε κάποιες εφαρμογές για το Sass. Η δωρεάν επιλογή είναι Scout. είναι κατασκευασμένο από το Adobe Air, ώστε να μπορεί να λειτουργεί σε όλα τα λειτουργικά συστήματα (Windows, OSX και Linux).

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

Έτσι, αν δεν έχετε την υπομονή για αυτό, υπάρχουν επίσης μερικές πληρωμένες επιλογές. Η τιμή ποικίλλει για κάθε εφαρμογή, το Compass.app πηγαίνει για $ 10, Fire.app, $ 14 και Codekit για $ 25.

Αναγνώριση κώδικα

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

Εάν εργάζεστε με το Sublime Text 2 όπως και εγώ, μπορείτε να χρησιμοποιήσετε αυτά τα πακέτα. Υψηλό κείμενο HAML & Sass και Υψηλό κείμενο 2 Sass Package και για ευκολότερο τρόπο, μπορείτε να εγκαταστήσετε ένα από αυτά τα πακέτα μέσω του Control Package.

Για άλλους συντάκτες κώδικα, δείτε παρακάτω ή δοκιμάστε το Googling για αυτό.

• Αυτό είναι ένα εξαιρετικό φροντιστήριο προβολής για το Sass με το Dreamweaver
• Λειτουργία Sass για Coda. Αλλά, φαίνεται ότι αυτός ο τρόπος έχει ενσωματωθεί στην Coda από την έκδοση 2
• TextMate Επίσημο πακέτο SCSS
• Ζάχαρη Espresso για Sass
• InType Bundles

Γλώσσα Sass

Το Sass και το LESS μοιράζονται κάποιες κοινές γλώσσες, παρακάτω είναι μερικές από αυτές.

Μεταβλητές

 $ color-base: # 000; $ πλάτος: 100px; 

Η μόνη διαφορά από τις μεταβλητές LESS είναι ότι η μεταβλητή στο Sass ορίζεται με a $ σημάδι.

Κανόνες κακοποίησης

 κεφαλίδα width: 980px; ύψος: 80px; nav ul style-style: none γεμίσματα: κανένα · περιθώριο: κανένας.  li εμφάνιση: εν σειρά. ένα κείμενο-διακόσμηση: κανένα?  

Mixins και λειτουργίες

 @mixin border-radius (ακτίνα $) -moz-border-radius: ακτίνα $; -webkit-ακτίνα-ακτίνα: ακτίνα $; -ms-ακτίνα-ακτίνα: ακτίνα $; ακτίνα ακτίνας: ακτίνα $;  

Λειτουργίες

 li πλάτος: $ πλάτος / 5 - 10px;  

Υποχρεωτική δήλωση

 @if ελαφρότητα ($ color-base)> = 51% χρώμα-φόντου: # 333333;  @else χρώμα-φόντου: #ffffff;  

Σε λιγότερο μπορείτε να κάνετε παρόμοιο πράγμα μέσω της έκφρασης Guard, την οποία καλύψαμε σε αυτό το σεμινάριο.

Τελική σκέψη

Και αυτό είναι. Στην επόμενη ανάρτηση, θα αρχίσουμε να εξερευνούμε τις γλώσσες Sass και τον σύντροφό της, Compass. Μείνετε συντονισμένοι.