Articles
Wprowadzenie do SASS/SCSS
Funkcja `if` w SASS

Funkcja `if` w SASS

Ten artykuł wyjaśnia funkcję if w SASS.

Przejdziemy krok po kroku od podstaw funkcji if po zaawansowane techniki.

YouTube Video

Funkcja if w SASS

Funkcja if() to prosta funkcja warunkowa dostępna w SASS, która zwraca jedną z dwóch wartości w zależności od warunku logicznego. Jest podobna do operatora warunkowego (trójargumentowego) w JavaScripcie.

Składnia

Składnia jest następująca:.

1// if(condition, trueValue, falseValue)
  • Jeśli condition ma wartość true, zwracane jest trueValue; jeśli false, zwracane jest falseValue.

Podstawowe użycie

Na przykład możesz użyć funkcji if(), aby zmieniać kolory tła i tekstu w zależności od tego, czy motyw jest ciemny, czy jasny.

Przykładowy Kod 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Jeśli zmienna $theme ma wartość "dark", tło staje się czarne z białym tekstem; jeśli "light", tło staje się białe z czarnym tekstem.

Wygenerowany CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Ponieważ zmienna $theme ma wartość "dark", tło jest czarne z białym tekstem.

Różnice między instrukcją @if a funkcją if()

Sass udostępnia instrukcję @if oraz funkcję if() do warunkowego rozgałęziania, ale są one używane do różnych celów.

Przykładowy Kod 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • Instrukcja @if kontroluje, który kod jest generowany podczas kompilacji Sass.
  • Z kolei funkcja if() zwraca wartość i służy do dynamicznego przełączania wartości w wyrażeniach.

Wygenerowany CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • W tym przykładzie, ponieważ $theme ma wartość "dark", zastosowano czarne tło i biały kolor tekstu.
  • Dwie główne różnice są takie, że instrukcja @if kontroluje strukturę, a funkcja if() zwraca wartość.

Używanie zagnieżdżonych funkcji if

Gdy potrzebujesz złożonego rozgałęzienia, możesz zagnieżdżać funkcje if.

Przykładowy Kod 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Jeśli $theme to "dark", zwracany jest czarny; jeśli "light", zwracany jest biały; w przeciwnym razie zwracana jest wartość domyślna ($custom-color).

Wygenerowany CSS 

1body {
2  background-color: blue;
3}
  • Ponieważ zmienna $theme ma wartość custom, kolor tła jest niebieski.

Praktyczne zastosowania

Przełączanie motywu

Poniżej znajduje się przykład zmieniający style przycisku w zależności od motywu.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Ten kod to przykład warunków w SASS, który przełącza kolory tła, tekstu i obramowania przycisku w zależności od wartości zmiennej $theme. Funkcja if() służy do dynamicznego ustawiania stylów dla ciemnych i jasnych motywów.

Wygenerowany CSS 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Przełączając motyw, możesz jednolicie zmieniać ogólny wygląd.

Zaawansowany przykład: dynamiczne ustawianie kontrastu kolorów

Przyjrzyjmy się przykładowi, który automatycznie ustawia kolor tekstu na podstawie koloru tła.

Przykładowy Kod 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • Funkcja color.channel() służy do pobrania jasności (lightness) koloru tła. Jeśli ta wartość jest większa niż 50%, wybierana jest czerń; jeśli mniejsza, jako kolor tekstu wybierana jest biel, co automatycznie optymalizuje kontrast z tłem.

Wygenerowany CSS 

1body {
2  background-color: #000;
3  color: white;
4}
  • Używając funkcji if(), można wprowadzać elastyczne style uwzględniające dostępność, na przykład dostosowywanie kontrastu.

Łączenie z @function

Użycie funkcji if wewnątrz @function pozwala na jeszcze bardziej elastyczne projektowanie stylów.

Przykładowy Kod 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Ten kod pokazuje użycie if() w ramach @function do zwracania odpowiednich kolorów w zależności od motywu i typu koloru. To umożliwia spójne i wielokrotnego użytku projektowanie stylów dla każdego motywu.

Wygenerowany CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Tworząc i używając funkcji pomocniczych wykorzystujących if(), można poprawić łatwość utrzymania całego projektu.

Notatki

  1. Funkcji if nie można używać z wartościami dynamicznymi Ponieważ sam CSS jest językiem statycznym, funkcja if ustala wartości w momencie kompilacji SASS. Do warunkowej logiki w czasie wykonywania musisz użyć JavaScriptu.

  2. Stawiaj na czytelność Ponieważ zagnieżdżone funkcje if mogą stać się złożone i pogarszać czytelność, możesz w razie potrzeby używać @mixin i @function w SASS-ie, aby uporządkować kod.

Wnioski

Funkcja if w SASS to potężne narzędzie, które zwraca różne wartości w zależności od warunków. Przydaje się nie tylko do prostych warunków, ale także w wielu scenariuszach, takich jak przełączanie motywów i dynamiczne ustawienia stylów. Jednak przy złożonych warunkach zwracaj uwagę na czytelność i wykorzystuj @mixin oraz @function, aby poprawić łatwość utrzymania.

Opanowując funkcję if, możesz osiągnąć bardziej wydajne i elastyczne projektowanie stylów.

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

YouTube Video

Instrukcje warunkowe w SASS