Εισαγωγή στο Sass

Τι πρέπει να γνωρίζετε

Πριν συνεχίσετε, πρέπει να έχετε βασική γνώση για το εξής:

  • HTML
  • CSS

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

Τι είναι το Sass;

  • Το Sass σημαίνει Syntactically Awesome Stylesheet (η γλωσσή έχει εξαιρετική γραμματική)
  • Το Sass είναι μια επέκταση του CSS
  • Το Sass είναι ένας προεπεξεργαστής CSS
  • Το Sass είναι πλήρως συμβατό με όλες τις εκδόσεις του CSS
  • Το Sass μειώνει την επανάληψη του CSS, εξοικονομώντας χρόνο
  • Το Sass σχεδιάστηκε από τον Hampton Catlin και αναπτύχθηκε από την Natalie Weizenbaum το 2006
  • Το Sass μπορεί να κατεβάστε και να χρησιμοποιήσετε δωρεάν

Γιατί να χρησιμοποιήσετε το Sass;

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

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

Μια απλή παράδειγμα για το Sass που είναι πολύ χρήσιμο

Ας υποθέσουμε ότι έχουμε έναν ιστότοπο με τρία κύρια χρώματα:

#a2b9bc
#b2ad7f
#878f99

Τότε, πόσα φορές πρέπει να πληκτρολογήσετε αυτές τις τιμές HEX; Πολλές φορές. Τι γίνεται αν αλλάζει το ίδιο χρώμα;

Μπορείτε να γράψετε τον παρακάτω κώδικα του Sass, αντί να πληκτρολογήσετε πολλές φορές τις παραπάνω τιμές:

Παράδειγμα Sass

/* Ορισμός μεταβλητών για το αρχικό χρώμα */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Χρήση μεταβλητών */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

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

Πώς λειτουργεί το Sass;

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

Αυτός ο διαδικασία ονομάζεται μετατροπή (transpiling). Επομένως, πρέπει να παρέχετε κώδικα Sass στον μετατροπέα (επιλογή πρόγραμματος) και να λάβετε πίσω κώδικα CSS.

Συμβουλή:Η μετατροπή είναι ένας όρος που χρησιμοποιείται για τη μετατροπή/μετάφραση κώδικα που γραφόταν σε μια γλώσσα σε μια άλλη γλώσσα.

Τύπος αρχείων Sass

Η επέκταση αρχείων των αρχείων Sass είναι ".scss".

Σχόλια Sass

Το Sass υποστηρίζει τα πρότυπα σχολίων CSS /* σχόλιο */Επιπλέον υποστηρίζονται σχόλια εντός γραμμής // σχόλιο:

Παράδειγμα Sass

/* Ορισμός κύριων χρωμάτων */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Χρήση μεταβλητών */
.main-header {
  background-color: $primary_1; // Μπορείτε να προσθέσετε σχόλια εδώ
}