Articles
Wprowadzenie do SASS/SCSS
Flaga `!default` w SASS

Flaga `!default` w SASS

Ten artykuł wyjaśnia flagę !default w SASS.

Wyjaśnimy szczegółowo flagę !default i pokażemy, jak jej używać na praktycznych przykładach.

YouTube Video

Flaga !default w SASS

Flaga !default w SASS to ważne narzędzie zwiększające modularność i możliwość ponownego użycia arkuszy stylów. Używając tej flagi, możesz ustawić domyślne wartości dla zmiennych, umożliwiając jednocześnie priorytet wartościom zdefiniowanym w innych miejscach. Tutaj szczegółowo wyjaśnimy flagę !default i zademonstrujemy jej użycie na praktycznych przykładach.

Flaga !default to funkcja specyficzna dla SASS pozwalająca ustawić domyślne wartości zmiennych. Dodając tę flagę, uzyskujesz następujące zachowanie:.

  • Określenie wartości domyślnych Wartość jest ustawiana tylko wtedy, gdy zmienna nie została zdefiniowana w innym miejscu.

  • Kontrolowanie priorytetu Jeśli zmienna jest już zdefiniowana, jej wartość nie zostanie nadpisana.

Ta funkcjonalność jest szczególnie przydatna podczas tworzenia modułów i bibliotek. Użytkownicy mogą ustawić własne wartości, ale jeśli żadna nie zostanie określona, zostaną użyte wartości domyślne.

Podstawowy przykład

Poniższy kod pokazuje podstawowe użycie flagi !default.

1// _variables.scss
2$primary-color: blue !default;
  • Definiowanie domyślnej zmiennej $primary-color z użyciem flagi !default.
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • Importowanie zmiennych za pomocą @use i nadpisywanie $primary-color przy użyciu with.

Wynikowy CSS 

1body {
2    background-color: red;
3}
  • W tym przykładzie, ponieważ $primary-color jest ustawiony na red w main.scss, blue zdefiniowany w _variables.scss nie zostanie użyty.

Gdy zmienna nie jest zdefiniowana

Jeśli zmienna nie jest zdefiniowana w main.scss, zostanie wykorzystana wartość domyślna.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • Ponieważ zmienna jest importowana bez nadpisania, domyślna wartość blue dla $primary-color zdefiniowana w _variables.scss zostaje zastosowana.

Wynikowy CSS 

1body {
2    background-color: blue;
3}

Użycie w zagnieżdżonych modułach

Użycie !default w modułach umożliwia elastyczne dostosowanie.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • Definiowanie $primary-color i $button-color z użyciem flagi !default.
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • Importowanie modułu variables i określanie koloru .button za pomocą zmiennej $button-color.
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • Używanie @use z with do nadpisania $button-color na orange oraz korzystanie z modułu buttons.

Wynikowy CSS 

1.button {
2    color: orange;
3}
  • Dzięki temu moduły zapewniają wartości domyślne, jednocześnie respektując ustawienia zdefiniowane przez użytkowników.

Ważne uwagi

Podczas korzystania z flagi !default należy wziąć pod uwagę następujące kwestie:.

  • Wybór odpowiednich wartości domyślnych Wartości domyślne powinny być dobrane tak, aby obejmowały najczęstsze przypadki użycia.

  • Przemyślany projekt Stosuj spójne nazwy zmiennych i unikaj konfliktów z innymi modułami.

  • Weryfikacja kolejności Aby flaga !default działała zgodnie z założeniem, należy prawidłowo zarządzać kolejnością nadpisywania zmiennych.

Praktyczne scenariusze

Zmiana motywu

Na przykład podczas tworzenia biblioteki wspierającej motywy, możesz użyć !default, aby ustawić domyślne wartości możliwe do dostosowania.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • Definiowanie $background-color i $text-color z użyciem flagi !default dla motywu oraz zastosowanie ich do body.
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • Dostosowywanie motywu poprzez nadpisanie $background-color za pomocą @use i with.

Wynikowy CSS 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Komponenty wielokrotnego użytku

W komponencie przycisku wielokrotnego użytku możesz ustawić domyślne style, pozwalając użytkownikowi nadpisać kolor.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • Definiowanie domyślnych kolorów tła i tekstu dla przycisków z użyciem !default oraz zastosowanie stylów.
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • Dostosowywanie koloru przycisku poprzez nadpisanie $button-bg za pomocą @use i with.

Wynikowy CSS 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Podsumowanie flagi !default

Flaga !default w SASS to potężne narzędzie podczas tworzenia modułów i bibliotek. Zwiększa możliwość ponownego użycia, umożliwiając elastyczną personalizację.

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

YouTube Video

Zmienne SASSFlaga `!global` w SASS