Πλεονεκτήματα της χρήσης ενός Προεπεξεργαστή (Sass) στην ανάπτυξη CSS

Υπάρχουν πολλά επιχειρήματα στο διαδίκτυο αν η χρήση ενός Προεπεξεργαστή CSS είναι χρήσιμη για την ανάπτυξη ή όχι. Η προσωπική μου άποψη είναι ότι μπορεί να μην χρειάζεστε έναν προεπεξεργαστή για μικρά έργα ή εφαρμογές ιστού.

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

  • Μεγάλη προσπάθεια για μικρές αλλαγές
  • Δυσκολίες στη δόμηση του κώδικα
  • Κωδικοποίηση πλεονασμού
  • Ατελείωτες γραμμές τάξεων και κανόνων CSS

Ένας προεπεξεργαστής μας βοηθά να αντιμετωπίσουμε αυτά τα προβλήματα. Έχει κάποια πλεονεκτήματα έναντι του κανονικού CSS. Πριν να βάψουμε βαθύτερα, πρώτα να εξηγήσουμε τι είναι ένας προεπεξεργαστής CSS ...

Τι είναι ο Προεπεξεργαστής CSS;

Ένα πρόγραμμα / εργαλείο που έχει τη δική του σύνταξη που παίρνει μεταγλωττισμένο αργότερα στον τυπικό κώδικα CSS.

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

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

Τι είναι ο Sass;

Αναφορά: επίσημη ιστοσελίδα της Sass

Το Sass είναι ένας από τους πιο ευρέως χρησιμοποιούμενους Προεπεξεργαστές CSS. Έχει διάφορα χαρακτηριστικά για να βοηθήσει τους προγραμματιστές να γράψουν καλύτερο και καθαρότερο κώδικα CSS. Μπορείτε να ελέγξετε για περισσότερες λεπτομέρειες από την επίσημη ιστοσελίδα της Sass & Github repository.

Συχνές ερωτήσεις: Sass vs SCSS

Αυτή είναι μια συνηθισμένη ερώτηση. Είναι στην πραγματικότητα και οι δύο Sass με διαφορετική σύνταξη. Το SCSS είναι βασικά μια νεότερη έκδοση, Sass Version 3.

Παράδειγμα σύνταξης Sass:

$ χρώμα: γκρι
= η γραμματοσειρά μου ($ χρώμα)
  γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif
  μέγεθος γραμματοσειράς: 16px
  χρώμα: $ χρώμα
σώμα
  φόντο: $ χρώμα
  περιθώριο: 0
  + my-font (λευκό)

Παράδειγμα σύνταξης SCSS:

$ χρώμα: γκρι;
@mixin μου-γραμματοσειρά ($ χρώμα) {
  γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif;
  μέγεθος γραμματοσειράς: 16px;
  χρώμα: $ χρώμα;
}}
σώμα {
  φόντο: $ χρώμα;
  περιθώριο: 0;
  @ include my-font (άσπρο);
}}

Όπως μπορούμε να δούμε, το SCSS (Sassy CSS) έχει μια συνταγή τύπου CSS, η οποία είναι πολύ πιο εύκολη στην ανάγνωση. Είναι μια επέκταση του CSS, ενώ ο Sass έχει μια πιο διαφορετική σύνταξη. Η επέκταση αρχείου τους είναι επίσης διαφορετική: .sass & .scss.

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

Χαρακτηριστικό # 1: Μεταβλητές

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

.box-1 {
   πλάτος: 100px;
   ύψος: 100px;
   φόντο: κόκκινο;
}}
.box-2 {
   πλάτος: 100px;
   ύψος: 100px;
   φόντο: κίτρινο;
}}
...
.box-20 {
   πλάτος: 100px;
   ύψος: 100px;
   φόντο: μπλε;
}}

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

Πώς μπορούμε να το κάνουμε πιο αποτελεσματικά;

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

Ορισμός μεταβλητής:

$ variable-name: τιμή;

Επιστρέφοντας στο παραπάνω παράδειγμα, αν ορίσουμε μεταβλητές για το πλάτος και το ύψος:

$ κουτί-πλάτος: 100px;
$ box-height: 100px;

αργότερα, όταν απαιτείται αλλαγή, μόνο που πρέπει να κάνουμε είναι να αλλάξουμε τις αξίες τους μία φορά:

$ κουτί-πλάτος: 200px; // άλλαξε από 100px σε 200px
$ box-height: 200px; // αυτό είναι όλο!
.box-1 {
   πλάτος: $ box-width; // χρησιμοποιώντας τώρα μεταβλητές αντί για εικονοστοιχεία
   ύψος: $ box-height;
   φόντο: κόκκινο;
}}
.box-2 {
   πλάτος: $ box-width;
   ύψος: $ box-height;
   φόντο: κίτρινο;
}}
...
.box-20 {
   πλάτος: $ box-width;
   ύψος: $ box-height;
   φόντο: μπλε;
}}

Το CSS υποστηρίζει επίσης μεταβλητές τώρα, αλλά δεν λειτουργεί σε IE & παλιές εκδόσεις άλλων προγραμμάτων περιήγησης:

https://caniuse.com/

Χαρακτηριστικό # 2: Τοποθέτηση

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

Για παράδειγμα, ας ορίσουμε ένα μενού πλοήγησης με συνδέσμους με δυνατότητα κλικ στο παρακάτω HTML:

Το HTML υποστηρίζει ένθετο κώδικα. Ωστόσο, χωρίς να φωλιάζουν, μοιάζουν με αυτό στο CSS:

CSS για το μενού πλοήγησης

Έπρεπε να γράψουμε το nav για κάθε ετικέτα, ακόμη και για την ψευδο-τάξη της άγκυρας (hover) επειδή το nav είναι η γονική ετικέτα όλων. Ωστόσο, ο Sass υποστηρίζει τη φωλιά:

Ίδια μαθήματα με τον Sass

Εδώ μπορούμε να γράψουμε καλύτερα δομημένο κώδικα όπως στο HTML. Δεν χρειάζεται να γράφουμε class class μετά την τάξη, η οποία αποτρέπει επίσης την απόλυση

Σημαντικό: Δεν συνιστάται να φωλιάζετε τάξεις βαθύτερα από 3 επίπεδα.

Χαρακτηριστικό # 3: Mixins

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

Τι είναι το Mixin;

Τα Mixins είναι λειτουργίες Sass που ομαδοποιούν τις δηλώσεις CSS. Μπορούμε να τις επαναχρησιμοποιήσουμε αργότερα σαν μεταβλητές.

Μπορούμε να δημιουργήσουμε ένα mixin με την εντολή @ mixin, ακολουθούμενη από ένα όνομα:

@mixin my-font {
  γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif;
  μέγεθος γραμματοσειράς: 16px;
  γραμματοσειρά: πλάγια;
}}

ή μπορούμε να δημιουργήσουμε ένα mixin ως συνάρτηση και να προσθέσουμε επίσης παραμέτρους:

$ font-color: κόκκινο;
@mixin μου-γραμματοσειρά ($ font-color) {
  γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif;
  μέγεθος γραμματοσειράς: 16px;
  γραμματοσειρά: πλάγια;
  χρώμα: $ font-color;
}}

Αφού δημιουργήσουμε το mixin, μπορούμε να το χρησιμοποιήσουμε σε οποιαδήποτε κλάση με την εντολή @ include. Μπορούμε λοιπόν να χρησιμοποιήσουμε το my-font mixin αντί για 4 γραμμές γραμματοσειρών κάθε φορά. Αυτή η προσέγγιση απλοποιεί τον κώδικα.

Π {
  @ include my-font;
}}
Η χρήση mixins είναι ένας καλός τρόπος για την αποφυγή πλεονασμού κώδικα.

Χαρακτηριστικό # 4: Εισαγωγές

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

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

Το μόνο που χρειάζεται είναι να εισαγάγετε το αρχείο Sass με εντολή @ import σε άλλο αρχείο Sass:

// Το κύριο αρχείο Sass
@import 'αρχείο';
@import 'anotherFile';
.class {
  // Ο κωδικός σου
}}
Δεν χρειάζεται να χρησιμοποιήσουμε τις επεκτάσεις .scss στη διαδρομή αρχείων, η Sass θα το καταλάβει.

Αυτά είναι μερικά σημαντικά χαρακτηριστικά του Sass, τα οποία μας βοηθούν να γράψουμε πιο αποτελεσματικό κώδικα CSS. Υπάρχουν και άλλα ωραία χαρακτηριστικά, ίσως μπορώ να τα καλύψω σε άλλο άρθρο. Για καλύτερη κατανόηση, μπορείτε να εγκαταστήσετε το Sass στο σύστημά σας. Ή μπορείτε να ξεκινήσετε απευθείας την κωδικοποίηση στο codepen.io.

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

Ελέγξτε το προφίλ μου για άλλα άρθρα:

Σας ευχαριστώ πολύ και μέχρι την επόμενη φορά!

Αυτή η ιστορία δημοσιεύεται στο The Startup, το μεγαλύτερο δημοσίευμα επιχειρηματικής δραστηριότητας του Medium ακολουθούμενο από +387.966 άτομα.

Εγγραφείτε για να λάβετε τις κορυφαίες ιστορίες μας εδώ.