Πώς να ξεκινήσετε με το Sass

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

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

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

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

Χαρακτηριστικά Sass

ο Ιστότοπο Sass περιγράφει τη γλώσσα ως εξής:

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

• Διαθέτοντας μια λειτουργία που σας επιτρέπει να φωτίζετε επιλογείς παιδιών μέσα στον γονικό επιλογέα ή να φωλιάζετε ιδιότητες, εξοικονομώντας τον εαυτό σας πολλές επαναλήψεις και πονοκέφαλο.
• Μεταβλητές αυτό το χαρακτηριστικό σας επιτρέπει να δημιουργήσετε προσαρμοσμένες προσαρμοσμένες μεταβλητές (όπως χρώματα και αριθμούς) που θα χρησιμοποιηθούν σε όλο το φύλλο στυλ σας, το οποίο θα κάνει τη μετάβαση και θα κάνει αλλαγές μια απόλυτη αύρα.
• Οι λειτουργίες και οι λειτουργίες απλοποιούν τα μαθηματικά που τείνουν να έρχονται με στυλ CSS, επιτρέποντάς σας να υπολογίζετε εύκολα το μέγεθος ή / και το χρώμα ενός στοιχείου στο φύλλο στυλ σας χωρίς να χρειάζεται να το υπολογίζετε μόνοι σας σωστά.
• Mixins αυτό είναι ένα τεράστιο χαρακτηριστικό εξοικονόμησης χρόνου και χώρου που σας επιτρέπει να επαναχρησιμοποιείτε ολόκληρα μπλοκ από το εσωτερικό του φύλλου στυλ χωρίς τη συνηθισμένη ταλαιπωρία πολλών αντιγράφων και επικόλλησης του κώδικα.
• Τα επιχειρήματα είναι ότι η Sass λάμπει πραγματικά, εφαρμόζοντας λίστες μεταβλητών στις οποίες έχει εκχωρηθεί μια τιμή κάθε φορά που χρησιμοποιείται ένα mixin αυτό το χαρακτηριστικό μπορεί πραγματικά να επεκτείνει την ισχύ των mixins σας.

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

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

Τα μειονεκτήματα

Φυσικά, δεν είναι όλα επάνω. Ακόμα και μέσα στην εξέλιξή του από το αρχικό Sass στο SCSS (Sassy CSS), ένα μέρος της περιττής ακαταστασίας που του έδινε τόσο πολλούς σχεδιαστές απαλλαγής από το φοβερό ελλειψοειδές ή το βραχίονα - προστέθηκε ξανά για να καταπραΰνει μερικά μέλη της κοινότητας.

• Δεν είναι το πρότυπο το οποίο μπορεί να μην έχει σημασία για μερικούς, αλλά το οποίο κρατάει βάρος με πολλούς στην κοινότητα που αναζητούν λύσεις που μπορούν να εφαρμόσουν και να διαχειριστούν πλήρως, και με την έλλειψη αποδοχής έρχεται η έλλειψη ειδικών πόρων.
• Δεν είναι απαραιτήτως φιλική προς την ομάδα η οποία είναι στην πραγματικότητα μια διαρροή από το Sass που δεν είναι τυποποιημένη και χρησιμοποιείται ευρέως μέσα στην κοινότητα. Η εργασία σε μια ομάδα όπου όλοι πρέπει να μπορούν να έχουν πρόσβαση και να χειριστούν τον κώδικα είναι προβληματικός εάν χρησιμοποιείτε το Sass.
• Εάν ο κωδικός σας είναι ακάθαρτος, θα σας φανεί ότι αν καταλήξετε με ένα σωρό χάος στο backend, μην περιμένετε ότι η έξοδος θα είναι καθαρή και θα το αποκρύψετε για εσάς (εδώ το χαρακτηριστικό φωλιάσματος μπορεί πραγματικά να λειτουργήσει εναντίον σας αν χρησιμοποιήσετε πάρα πολύ βαριά ομαδοποίηση όταν μεταφράζεται).
• Όχι πολύ φιλικός για αρχάριους , πρέπει να είστε εξοικειωμένοι με την κωδικοποίηση CSS για να είστε σε θέση να διαχειριστείτε το Sass. Το άλμα ευθεία χωρίς μια στοιχειώδη κατανόηση του CSS θα οδηγήσει μόνο σε προβλήματα.

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

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

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

Οι χρήστες του Linux έχουν το πόδι επάνω εδώ, καθώς είναι πιθανώς εξοικειωμένοι με τη γραμμή εντολών τους. Οι χρήστες Windows και OSX μπορεί να μην είναι τόσο τυχεροί. Εάν χρειάζεστε βοήθεια για να ξεκινήσετε, ανατρέξτε είτε στον Οδηγό εντολών OSX είτε στον Οδηγό εντολών των Windows

Πριν μπορέσετε να εγκαταστήσετε και να εκτελέσετε το Sass, θα πρέπει να βεβαιωθείτε ότι έχετε εγκαταστήσει το Ruby. Τα Windows τείνουν να μην έχουν προεγκατεστημένο το Ruby, οπότε θα χρειαστεί να εγκαταστήσετε τον Ruby χρησιμοποιώντας το πρόγραμμα εγκατάστασης των Windows. Αν είστε χρήστης του Linux, αποκτήστε πρόσβαση στη γραμμή εντολών σας και εγκαταστήστε Ruby και Ruby Gems. Εάν εκτελείτε OSX, μπορείτε να πάρετε ένα διάλειμμα εδώ, αφού η Ruby έρχεται προεγκατεστημένη.

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

1. Ανοίξτε τη γραμμή εντολών σας
2. Πλοηγηθείτε στον φάκελο του κάδου Ruby
3. Εισαγάγετε το "gem install sass"

Αυτό είναι! Το Sass είναι εγκατεστημένο, είστε έτοιμοι να πάτε.

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

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

Χρησιμοποιώντας τον προτιμώμενο επεξεργαστή κειμένου δημιουργήστε ένα αρχείο με τίτλο "test.scss"

Εισάγετε μόνο ένα κομμάτι απλού στυλ όπως:

.black {color: #000;}

Για να βεβαιωθείτε ότι ο Sass λειτουργεί όπως πρέπει, ανοίξτε τη γραμμή εντολών και μεταβείτε στο φάκελο που περιέχει το δοκιμαστικό σας αρχείο. Πληκτρολογήστε "sass test.scss" και η έξοδος θα πρέπει να είναι αυτό που υπάρχει στο αρχείο css.

Μπορεί να έχετε το σφάλμα 'sass' δεν αναγνωρίζεται ως εσωτερική ή εξωτερική εντολή ... Αν συμβεί αυτό, ίσως χρειαστεί να προσθέσετε μια διαδρομή στο αρχείο Rubin σας. Για να το κάνετε αυτό, μεταβείτε στον Πίνακα Ελέγχου> Σύστημα> Προχωρημένους> Μεταβλητές περιβάλλοντος. Κάντε κλικ στο κουμπί Προσθήκη . Το όνομα της μεταβλητής θα είναι διαδρομή και η μεταβλητή τιμή θα είναι η διεύθυνση του φάκελου του ρουμπινίσκου (c: Ruby ### bin)

Μεταφράστε το αρχείο Sass σε ένα αρχείο CSS, έτσι ώστε όταν αλλάξετε το αρχείο test.scss, το test.css θα ενημερωθεί αυτόματα. Κάνετε αυτό εισάγοντας τα ακόλουθα στη γραμμή εντολών σας.

sass --watch test.scss:test.css

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

sass --watch stylesheets/sass:stylesheets/css

Σύνταξη

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

Το πρωτότυπο Sass μοιάζει με αυτό:

.blackcolor: #000

Όπως έχουμε δει ήδη, το SCSS μοιάζει με αυτό:

.black {color: #000;}

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

συμπέρασμα

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

Είστε χρήστης Sass ή SCSS; Τι πιστεύετε για τις δυνατότητες που προσφέρει η Sass; Ενημερώστε μας στο τμήμα σχολίων παρακάτω.

Προτεινόμενη εικόνα και μικρογραφία, βελτιωμένη εικόνα μέσω Shutterstock

• ← Διακοπή αναλύσεων οθόνης κυνηγίου
• Πώς να δημιουργήσετε μια απλή επεξήγηση εργαλείου CSS3 →