Zmienne Sass

Zmienne Sass

Zmienna to sposób przechowywania informacji, którą możesz używać ponownie w przyszłości.

Poprzez Sass, możesz przechowywaćinformacjaprzechowywane w zmiennych, np.:

• ciąg znaków
• liczba
• kolor
• wartość logiczna
• lista
• null

Sass używa znaku $ po nazwą do deklarowania zmiennych:

Gramatyka zmiennych Sass

$variablename: value;

Poniższy przykład deklaruje 4 zmienne:

• myFont
• myColor
• myFontSize
• myWidth

Po zadeklarowaniu zmiennych, możesz używać ich w dowolnym miejscu:

Gramatyka SCSS:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

Zatem, gdy plik Sass jest transpilowany, używa zmiennych (myFont, myColor itp.) i wydaje normalny CSS oraz wartości zmiennych umieszczone w CSS, np.:

Wyjście CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 680px;
}

Zakres zmiennych Sass

Zmienne Sass są dostępne tylko na poziomie zagnieżdżenia, w którym zostały zdefiniowane.

Proszę spojrzeć na poniższy przykład:

Gramatyka SCSS:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> Kolor tekstu w etykiecie będzie czerwony czy zielony? Jest czerwony!

Inna definicja, $myColor: green; znajduje się <h1> wewnątrz zasad, i tylko tam jest dostępna!

Więc, wyjście CSS będzie:

Wyjście CSS:

h1 {
  color: green;
}
p {
  color: red;
}

Dobrze, to jest domyślne zachowanie zakresu zmiennych.

Użycie Sass !global

Można użyć !global Przełącznik nadpisuje domyślną zachowanie zakresu zmiennych.

!global oznacza, że zmienna jest globalna, co oznacza, że można do niej uzyskać dostęp na wszystkich poziomach.

Zobacz poniższy przykład (ten sam jak wyżej, ale dodano !global）：

Gramatyka SCSS:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

Teraz <p> Kolor tekstu w etykiecie będzie zielony!

Więc, wyjście CSS będzie:

Wyjście CSS:

h1 {
  color: green;
}
p {
  color: green;
}

Wskazówka:Warto zdefiniować zmienne globalne poza wszystkimi zasadami. Najlepiej jest zdefiniować wszystkie zmienne globalne w swoim własnym pliku, nazwanym "_globals.scss", i użyć @include Słowa kluczowe zawierają ten plik.