Εισαγωγή στη γλώσσα SASS

Σε αυτό το εκπαιδευτικό εγχειρίδιο θα μελετήσουμε τον προπροσεγγιστή SASS. Το SASS είναι μια εναλλακτική λύση στον προπροσεγγιστή LESS, ο οποίος επίσης επιτρέπει τον προγραμματισμό σε CSS.

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

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

$font: Helvetica, sans-serif;
$color: #333;

body {
	font: $font;
	color: $color;
}