Επεξήγησαν οι προεπεξεργαστές CSS

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

Οι CS-Preprocessors μεταγλωττίζουν τον κωδικό που γράφεται χρησιμοποιώντας έναν ειδικό μεταγλωττιστή Στη συνέχεια το χρησιμοποιούν για να δημιουργήσουν ένα αρχείο CSS, το οποίο στη συνέχεια μπορεί να αναφέρεται από το κύριο έγγραφο HTML.

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

Φυσικά, οι προεπεξεργαστές CSS προσφέρουν και άλλα χαρακτηριστικά. Πολλές από τις προσφερόμενες λειτουργίες είναι απίστευτα παρόμοιες σε προεπεξεργαστές, με μόνο μικρές διαφορές στη σύνταξη. Έτσι, μπορείτε να επιλέξετε σχεδόν ό, τι θέλετε και θα μπορείτε να επιτύχετε τα ίδια πράγματα. Μερικά από τα πιο χρήσιμα χαρακτηριστικά είναι:

Μεταβλητές

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

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

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

Βρόχοι

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

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

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

Δηλώσεις If / Else

Ένα ακόμη χαρακτηριστικό που δεν διαθέτει το CSS είναι οι δηλώσεις If / Else. Αυτές θα εκτελέσουν ένα σύνολο οδηγιών μόνο εάν μια δεδομένη συνθήκη είναι αληθής. Ένα παράδειγμα αυτού στο SASS θα ήταν:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Εδώ, το χρώμα του φόντου θα αλλάξει χρώμα ανάλογα με το πλάτος του σώματος της σελίδας.

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

Περισσότερες πληροφορίες:

  • Τα καλύτερα σεμινάρια CSS
  • Έγγραφα SASS: //sass-lang.com/
  • Το SASS, ένας προεπεξεργαστής για τις διακοσμήσεις στο διαδίκτυο
  • Λιγότερα έγγραφα: //lesscss.org/
  • Έγγραφα Stylus: //stylus-lang.com/