Operator dalam SASS

Artikel ini menerangkan operator dalam SASS.

Kami akan menerangkan operator dalam SASS dengan contoh-contoh praktikal.

YouTube Video

Operator dalam SASS

Operator SASS merangkumi operasi berangka, operasi perbandingan, operasi logik, dan manipulasi rentetan.

Operasi Aritmetik (tambah, tolak, darab, bahagi, modulus)

SASS menyokong aritmetik standard, tetapi pembahagian / boleh mengelirukan dengan / dalam CSS, jadi adalah disyorkan untuk menggunakan math.div(). Nombor boleh mempunyai unit, dan operasi hanya boleh dilakukan antara unit yang serasi.

Di bawah adalah contoh aritmetik mudah dan penggunaan modul 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}

• Kod ini adalah contoh penambahan dan pendaraban dengan unit px, dan pembahagian menggunakan math.div().
• Unit yang tidak serasi seperti 10px + 2em akan menyebabkan ralat atau hasil yang tidak dijangka. Satukan unit atau gunakan fungsi unit() dan unitless().

Pengendalian dan penukaran automatik unit

SASS mengendalikan nombor dengan unit, dan peraturan unit bagi hasil pengiraan mengikut peraturan fizikal am. Sebagai contoh, px/px akan menjadi tanpa unit. Berhati-hati dengan pengurusan unit apabila menggunakan fungsi unit() atau selepas math.div().

Di bawah adalah contoh cara untuk mengendalikan campuran nilai berunit dan tanpa unit.

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

• Mendarab nilai dengan dan tanpa unit berfungsi dengan baik, tetapi berhati-hati dengan unit hasil (atau ketiadaannya) ketika membahagi.

Operator Perbandingan (==, !=, <, >, <=, >=)

SASS mempunyai operator perbandingan, yang boleh digunakan untuk cabangan dalam kondisi (@if) dan mixin. Perbandingan jenis kompleks seperti warna dan senarai mengikut peraturan tersendiri. Sila ambil perhatian bahawa perbandingan warna berbeza mengikut ruang warna.

Di bawah adalah contoh yang membandingkan dua nombor dan mencabangkan gaya.

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

• Operator perbandingan boleh digabungkan dengan @if untuk peraturan gaya yang responsif dan bersyarat.

Operasi Logik (and, or, not)

SASS menyokong and, or, dan not. Gunakan and/or untuk menggabungkan pelbagai syarat. Keutamaan dan susunan penilaian boleh dijelaskan dengan penggunaan kurungan.

Di bawah adalah contoh pengendalian syarat rumit menggunakan operator logik.

 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}

• Keutamaan antara and dan or boleh dijelaskan dengan menggunakan kurungan. Untuk syarat yang kompleks, penggunaan kurungan membantu mengekalkan keterbacaan dan keselamatan.

Operasi Rentetan — Cantuman dan Interpolasi

Dalam SASS, rentetan boleh dicantum menggunakan + atau interpolasi #{}. Hasil operator + bergantung sama ada rentetan kiri berpetik atau tidak, jadi penggunaan interpolasi #{} yang boleh diramal adalah lebih selamat.

Di bawah adalah contoh cantuman dan interpolasi.

 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}

• Penggunaan interpolasi #{} mengelakkan masalah petikan dan masukan jarak kosong tanpa sengaja.

Aritmetik warna (usang)

Pada masa lalu, SASS menyokong 'aritmetik warna', yang membolehkan anda menambah atau menolak nombor pada warna. Namun, aritmetik warna kini sudah tidak digunakan lagi, dan anda harus menggunakan fungsi dari modul sass:color untuk memanipulasi warna.

Berikut adalah contoh yang menunjukkan aritmetik warna secara langsung telah tidak disokong dan cadangan alternatifnya.

 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}

• Jika anda ingin memanipulasi warna, gunakan fungsi dari modul sass:color.

Kurungan dan Keutamaan Operator

Gunakan kurungan untuk mengawal susunan penilaian dalam operasi. Kurungan sentiasa dinilai terlebih dahulu sebelum operasi di luar kurungan. Gunakan kurungan dalam ungkapan kompleks untuk mengekalkan keterbacaan.

Di bawah adalah contoh untuk menjelaskan susunan penilaian dengan kurungan.

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

• Seperti dalam matematik, peraturan keutamaan diguna pakai, jadi gunakan kurungan untuk memastikan pengiraan berlaku mengikut susunan yang dimaksudkan.

Ringkasan

Apabila menggunakan operator dalam SASS, adalah penting untuk menulis kod dengan mengambil kira keserasian masa depan dan keterbacaan. Dalam ungkapan yang kompleks, jelaskan susunan pengiraan dengan menggunakan kurungan, dan utamakan keterbacaan kod.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video