Mga Operator sa SASS

Ipinaliwanag ng artikulong ito ang mga operator sa SASS.

Ipapaliwanag namin ang mga operator sa SASS gamit ang mga praktikal na halimbawa.

YouTube Video

Mga Operator sa SASS

Kasama sa mga operator ng SASS ang mga numerikong operasyon, paghahambing na operasyon, lohikal na operasyon, at manipulasyon ng mga string.

Mga Operasyong Aritmetika (pagdaragdag, pagbabawas, pagpaparami, paghahati, modulus)

Sinusuportahan ng SASS ang karaniwang aritmetika, ngunit ang paghahati na / ay nakakalito dahil sa CSS /, kaya inirerekomendang gamitin ang math.div(). Maaaring may unit ang mga numero, at posible lang ang mga operasyon sa pagitan ng magkatugmang mga unit.

Nasa ibaba ang mga halimbawa ng simpleng arithmetic at paggamit ng math na module.

 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}

• Ang code na ito ay halimbawa ng pagdaragdag at pagpaparami gamit ang px na unit, at paghahati gamit ang math.div().
• Ang mga hindi tugmang unit tulad ng 10px + 2em ay magbubunga ng error o hindi inaasahang resulta. Pag-isahin ang mga unit o gamitin ang mga function na unit() at unitless().

Paghawak at awtomatikong conversion ng mga unit

Hinahawakan ng SASS ang mga numero na may mga unit, at ang mga patakaran sa unit para sa resulta ng kalkulasyon ay sumusunod sa pangkalahatang pisikal na batas. Halimbawa, ang px/px ay nagiging walang unit. Mag-ingat sa paghawak ng unit kapag gumagamit ng unit() na function o pagkatapos ng math.div().

Nasa ibaba ang mga halimbawa kung paano hawakan ang pagsasama ng may unit at walang unit na mga halaga.

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 */

• Ang pagpaparami ng may unit at walang unit na mga halaga ay gumagana gaya ng inaasahan, ngunit mag-ingat sa magiging unit (o kawalan nito) kapag naghahati.

Mga Paghahambing na Operator (==, !=, <, >, <=, >=)

Ang SASS ay may mga paghahambing na operator, na maaaring gamitin para sa branching sa mga conditional (@if) at mixin. Ang paghahambing ng mga komplikadong uri tulad ng kulay at listahan ay may sariling mga tuntunin. Tandaan na ang paghahambing ng kulay ay nagkakaiba depende sa color space.

Narito ang isang halimbawa na naghahambing ng dalawang numero at nagba-branch ng istilo.

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

• Maaaring isama ang mga paghahambing na operator sa @if para sa mga responsive at conditional na estilo ng mga patakaran.

Mga Lohikal na Operasyon (at, o, hindi)

Sinusuportahan ng SASS ang and, or, at not. Gamitin ang and/or upang pagsamahin ang maraming kundisyon. Maaaring gawing malinaw ang precedence at pagkakasunod ng pagsusuri gamit ang panaklong.

Narito ang isang halimbawa ng paghawak ng komplikadong mga kundisyon gamit ang mga lohikal na operator.

 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}

• Ang precedence ng and at or ay maaaring gawing malinaw gamit ang panaklong. Para sa mga komplikadong kundisyon, nakakatulong ang paggamit ng panaklong sa pagpapanatili ng kalinawan at kaligtasan.

Mga Operasyon sa String — Pagsama-sama at Interpolasyon

Sa SASS, ang pagdugtong ng string ay maaaring gawin gamit ang + o interpolasyon na #{}. Ang resulta ng + na operator ay nakadepende kung ang kaliwang string ay may panipi o wala, kaya't mas ligtas gamitin ang tiyak na interpolasyon na #{}.

Nasa ibaba ang mga halimbawa ng pagdugtong at interpolasyon.

 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}

• Ang paggamit ng interpolasyon na #{} ay nakakaiwas sa mga isyu sa panipi at hindi inaasahang puwang.

Aritmetika ng kulay (deprecated)

Noon, sinusuportahan ng SASS ang 'color arithmetic', na nagpayagang magdagdag o magbawas ng mga numero sa mga kulay. Gayunpaman, luma na ang color arithmetic, at dapat kang gumamit ng mga function mula sa sass:color na module para manipulahin ang mga kulay.

Nasa ibaba ang mga halimbawa na nagpapakitang hindi na inirerekomenda ang direktang aritmetika ng kulay at mga alternatibong paraan.

 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}

• Kung nais mong manipulahin ang mga kulay, gumamit ng mga function mula sa sass:color na module.

Panaklong at Precedence ng Operator

Gamitin ang panaklong upang kontrolin ang pagkakasunod ng pagsusuri sa mga operasyon. Laging inuuna ang pagsusuri ng nasa loob ng panaklong bago ang iba pang operasyon sa labas nito. Gumamit ng panaklong sa mga komplikadong pahayag upang panatilihin ang kalinawan.

Nasa ibaba ang mga halimbawa ng pagpapalinaw ng pagkakasunod ng pagsusuri gamit ang panaklong.

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

• Tulad ng sa matematika, umiiral ang mga tuntunin ng precedence, kaya gumamit ng panaklong upang masigurong tama ang pagkakaayos ng kalkulasyon.

Buod

Kapag gumagamit ng mga operator sa SASS, mahalagang isulat ang code na isinasaalang-alang ang hinaharap na compatibility at kalinawan. Sa mga komplikadong pahayag, gawing malinaw ang pagkakasunod ng kalkulasyon gamit ang panaklong, at bigyang-priyoridad ang kalinawan ng code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video