Operatory w SASS

Ten artykuł wyjaśnia operatory w SASS.

Wyjaśnimy operatory w SASS na praktycznych przykładach.

YouTube Video

Operatory w SASS

Operatory SASS obejmują operacje numeryczne, operacje porównawcze, operacje logiczne oraz manipulacje na ciągach tekstowych.

Operacje arytmetyczne (dodawanie, odejmowanie, mnożenie, dzielenie, reszta z dzielenia)

SASS obsługuje standardowe operacje arytmetyczne, ale dzielenie / może być mylące w porównaniu z użyciem / w CSS, dlatego zaleca się stosowanie math.div(). Liczby mogą mieć jednostki, a operacje są możliwe tylko między kompatybilnymi jednostkami.

Poniżej znajdują się przykłady prostych działań arytmetycznych oraz użycia modułu math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• Ten kod jest przykładem dodawania i mnożenia z jednostką px oraz dzielenia przy użyciu math.div().
• Niekompatybilne jednostki, takie jak 10px + 2em, spowodują błąd lub nieoczekiwane wyniki. Ujednolić jednostki lub użyć funkcji unit() i unitless().

Obsługa i automatyczna konwersja jednostek

SASS obsługuje liczby z jednostkami, a zasady dotyczące jednostek wynikających z obliczeń podążają za ogólnymi regułami fizycznymi. Na przykład, px/px staje się bezjednostkowe. Zachowaj ostrożność przy zarządzaniu jednostkami podczas używania funkcji unit() lub po math.div().

Poniżej znajdują się przykłady pokazujące, jak obsługiwać mieszanie wartości z jednostkami i bez.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• Mnożenie wartości z jednostkami i bez działa zgodnie z oczekiwaniami, ale podczas dzielenia należy uważać na powstałą jednostkę (lub jej brak).

Operatory porównania (==, !=, <, >, <=, >=)

SASS posiada operatory porównania, które można używać do warunkowego rozgałęziania (@if) oraz w mixinach. Porównywanie złożonych typów, takich jak kolory i listy, rządzi się własnymi regułami. Porównania kolorów zależą od przestrzeni barw.

Poniżej znajduje się przykład porównania dwóch liczb i rozgałęzienia stylu.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• Operatory porównania można łączyć z @if do tworzenia responsywnych i warunkowych zasad stylu.

Operacje logiczne (and, or, not)

SASS obsługuje and, or oraz not. Stosuj and/or, aby połączyć wiele warunków. Priorytet i kolejność obliczeń można sprecyzować przy użyciu nawiasów.

Poniżej znajduje się przykład obsługi złożonych warunków przy użyciu operatorów logicznych.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• Priorytet operatorów and i or można wyjaśnić za pomocą nawiasów. W przypadku złożonych warunków stosowanie nawiasów pomaga zachować czytelność i bezpieczeństwo.

Operacje na ciągach — łączenie i interpolacja

W SASS łączenie ciągów może być wykonywane za pomocą + lub interpolacji #{}. Wynik operatora + zależy od tego, czy lewy ciąg jest w cudzysłowie, dlatego bezpieczniej jest użyć przewidywalnej interpolacji #{}.

Poniżej znajdują się przykłady łączenia i interpolacji.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• Stosując interpolację #{}, unikasz problemów związanych z cudzysłowami i niezamierzonymi odstępami.

Arytmetyka kolorów (przestarzała)

W przeszłości SASS obsługiwał 'arytmetykę kolorów', co pozwalało na dodawanie lub odejmowanie liczb od kolorów. Jednak arytmetyka kolorów jest obecnie przestarzała; aby manipulować kolorami, należy używać funkcji z modułu sass:color.

Poniżej znajdują się przykłady pokazujące, że bezpośrednia arytmetyka kolorów jest przestarzała oraz sugerowane alternatywy.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• Jeśli chcesz manipulować kolorami, użyj funkcji z modułu sass:color.

Nawiasy i priorytet operatorów

Używaj nawiasów, aby kontrolować kolejność wykonywania operacji. Nawiasy są zawsze oceniane przed operacjami poza nimi. Stosuj nawiasy w złożonych wyrażeniach, aby zachować czytelność.

Poniżej znajdują się przykłady wyjaśniające kolejność obliczeń poprzez zastosowanie nawiasów.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• Tak jak w matematyce, obowiązują reguły priorytetów, więc używaj nawiasów, aby zapewnić wykonywanie obliczeń we właściwej kolejności.

Podsumowanie

Korzystając z operatorów w SASS, ważne jest pisanie kodu z myślą o przyszłej kompatybilności i czytelności. W złożonych wyrażeniach wyjaśniaj kolejność obliczeń za pomocą nawiasów i stawiaj na czytelność kodu.

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

YouTube Video