Zmienne SASS

Ten artykuł wyjaśnia zmienne SASS.

Zapewnimy szczegółowe wyjaśnienie zmiennych SASS i poznamy ich rzeczywiste użycie krok po kroku.

YouTube Video

Zmienne SASS

SASS to rozszerzenie języka CSS, które pozwala pisać CSS w sposób bardziej elastyczny i efektywny. Jedną z jego cech są zmienne, które stanowią potężne narzędzie do utrzymania spójności stylów i ułatwiają wprowadzanie zmian.

Czym są zmienne SASS?

Zmienne SASS umożliwiają przechowywanie wartości takich jak kolory, rozmiary czcionek czy odstępy, które są często używane w CSS, dzięki czemu można nimi zarządzać w jednym miejscu.

Dzięki zastosowaniu zmiennych możesz łatwo zmieniać style i poprawić czytelność kodu.

Jak zapisywać zmienne

Zmienne można zapisywać w następujący sposób.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Nazwę zmiennej należy poprzedzić symbolem $.
• variable-name to nazwa zmiennej. Zaleca się nadanie jej jasnej i opisowej nazwy.
• value to wartość przypisana do zmiennej.

Podstawowe użycie zmiennych

Poniżej znajduje się podstawowy przykład zmiennej SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Po zdefiniowaniu zmiennej, takiej jak $primary-color, możesz wielokrotnie wykorzystywać tę samą wartość.
• Zmieniając wartość, wystarczy edytować definicję zmiennej, co poprawia łatwość utrzymania kodu.

Wygenerowany wynik CSS

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Używanie zmiennych w zagnieżdżeniach

Łączenie zagnieżdżania SASS ze zmiennymi pomaga uporządkować kod i ułatwia jego zarządzanie.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Zmienne można używać wewnątrz zagnieżdżonych selektorów.
• Łącząc zmienne, możesz uzyskać elastyczne stylizacje, na przykład przyciemniając kolor o 10% za pomocą funkcji color.adjust.

Wygenerowany wynik CSS

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Zmienne z wartościami domyślnymi

W SASS można ustawiać wartości domyślne dla zmiennych. Ustawienie wartości domyślnych pozwala używać zmiennych bez nadpisywania już istniejących.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Dzięki dodaniu !default, zmienna nie zostanie nadpisana, jeśli została już zdefiniowana.
• Jest to przydatne podczas pracy zespołowej oraz dla ustawień globalnych projektu.

Wygenerowany wynik CSS

1p {
2    font-size: 16px;
3}

Zakres zmiennej

Zmienne SASS posiadają zakres, a ich dostępność zależy od miejsca, w którym zostały zdefiniowane. Zrozumienie zakresu pozwala zapobiegać niezamierzonemu nadpisywaniu zmiennych.

1. Zakres globalny

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Zmienne o zakresie globalnym są dostępne w całym pliku.

2. Zakres lokalny

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Zmienne o zakresie lokalnym są dostępne tylko w określonym zagnieżdżeniu lub pliku.

Używanie zmiennych w obliczeniach

Zmienne SASS mogą być również używane w obliczeniach. Obliczenia mogą być wykonywane zarówno na wartościach jednostkowych, jak i na kolorach.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Wygenerowany wynik CSS

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Stosowanie zmiennych do modyfikacji kolorów lub obliczania odstępów poprawia łatwość utrzymania kodu.

Podsumowanie

Zmienne SASS to podstawowa funkcjonalność umożliwiająca efektywne zarządzanie i utrzymanie CSS.

Stosowanie zmiennych SASS pozwala zachować spójność stylów w całym projekcie oraz ułatwia wprowadzanie zmian.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video