Μεταβλητές Sass

Μεταβλητές Sass

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

Με το Sass, μπορείτε ναπληροφορίεςαποθηκεύονται σε μεταβλητές, όπως:

• 字符串
• αριθμός
• χρώμα
• 布尔值
• λίστα
• null

Η Sass χρησιμοποιεί το σύμβολο $ ακολουθούμενο από το όνομα για να αναφέρει μεταβλητές:

Γλώσσα μεταβλητών Sass:

$variablename: value;

Ο παρακάτω παράδειγμα αναφέρει 4 μεταβλητές:

• myFont
• myColor
• myFontSize
• myWidth

Μετά την αναφορά μεταβλητών, μπορείτε να χρησιμοποιήσετε αυτές τις μεταβλητές σε οποιοδήποτε σημείο:

Γλώσσα SCSS:

$myFont: Helvetica, sans-serif;
$myColor: κόκκινο;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  χρώμα: $myColor;
}
#container {
  width: $myWidth;
}

Άρα, όταν ο μεταφραστής Sass μεταφράζει αρχεία Sass, χρησιμοποιεί μεταβλητές (myFont, myColor κ.λπ.) και παράγει τυπικό CSS και τοποθετεί τις τιμές μεταβλητών στον κώδικα CSS, όπως εξής:

Απώτερη Εκτύπωση CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  χρώμα: κόκκινο;
}
#container {
  width: 680px;
}

Διαβάθμιση μεταβλητών Sass

Οι μεταβλητές Sass είναι διαθέσιμες μόνο στο επίπεδο κωδικοποίησης όπου ορίζονται.

Παρακαλώ δείτε τον παρακάτω παράδειγμα:

Γλώσσα SCSS:

$myColor: κόκκινο;
h1 {
  $myColor: πράσινο;
  χρώμα: $myColor;
}
p {
  χρώμα: $myColor;
}

<p> Το χρώμα του κειμένου μέσα στην ετικέτα είναι κόκκινο ή πράσινο? Είναι κόκκινο!

Αυτή είναι μια άλλη ορισμός, $myColor: πράσινο; Βρίσκεται <h1> εντός του κανόνα και είναι διαθέσιμο μόνο εκεί!

Επομένως, η απώτερη εκτύπωση CSS θα είναι:

Απώτερη Εκτύπωση CSS:

h1 {
  χρώμα: πράσινο;
}
p {
  χρώμα: κόκκινο;
}

Καλά, αυτό είναι η προεπιλεγμένη συμπεριφορά της περιοχής μεταβλητών.

Χρήση Sass !global

Μπορεί να χρησιμοποιηθεί !global Ο κουμπιάς καλύπτει την προεπιλεγμένη συμπεριφορά της περιοχής μεταβλητών.

!global υποδεικνύει ότι η μεταβλητή είναι καθολική, δηλαδή μπορεί να προσπελάζεται σε όλους τους επιπέδους.

Δείτε παρακάτω το παράδειγμα (το ίδιο με παραπάνω, αλλά με την προσθήκη !global）：

Γλώσσα SCSS:

$myColor: κόκκινο;
h1 {
  $myColor: πράσινο !global;
  χρώμα: $myColor;
}
p {
  χρώμα: $myColor;
}

Τώρα <p> Το χρώμα του κειμένου μέσα στην ετικέτα θα είναι πράσινο!

Επομένως, η απώτερη εκτύπωση CSS θα είναι:

Απώτερη Εκτύπωση CSS:

h1 {
  χρώμα: πράσινο;
}
p {
  χρώμα: πράσινο;
}

Σημείωση:Πρέπει να καθοριστούν οι καθολικές μεταβλητές σε κανένα κανόνα. Η σοφία είναι να καθοριστούν όλες οι καθολικές μεταβλητές στο δικό τους αρχείο, ονομαζόμενο "_globals.scss", και να χρησιμοποιηθούν @include Οι λέξεις-κλειδιά περιλαμβάνουν το αρχείο αυτό.