Operator dalam SASS

Artikel ini menjelaskan operator dalam SASS.

Kami akan menjelaskan operator dalam SASS dengan contoh praktis.

YouTube Video

Operator dalam SASS

Operator SASS mencakup operasi numerik, operasi perbandingan, operasi logika, dan manipulasi string.

Operasi Aritmatika (penjumlahan, pengurangan, perkalian, pembagian, modulus)

SASS mendukung operasi aritmatika standar, tetapi pembagian / bisa membingungkan dengan / di CSS, sehingga disarankan menggunakan math.div(). Angka dapat memiliki satuan, dan operasi hanya mungkin dilakukan antara satuan yang kompatibel.

Berikut adalah contoh aritmatika sederhana 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}

• Kode ini adalah contoh penjumlahan dan perkalian dengan satuan px, serta pembagian menggunakan math.div().
• Unit yang tidak kompatibel seperti 10px + 2em akan menghasilkan error atau hasil yang tidak diinginkan. Samakan unit atau gunakan fungsi unit() dan unitless().

Penanganan dan konversi otomatis unit

SASS menangani angka dengan unit, dan aturan unit untuk hasil perhitungan mengikuti aturan fisika umum. Sebagai contoh, px/px menjadi tanpa unit (unitless). Berhati-hatilah dengan pengelolaan unit ketika menggunakan fungsi unit() atau setelah math.div().

Berikut adalah contoh bagaimana menangani pencampuran nilai dengan 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 */

• Mengalikan nilai dengan dan tanpa unit akan berjalan seperti yang diharapkan, namun berhati-hatilah dengan unit hasil pembagian (atau ketiadaannya).

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

SASS memiliki operator perbandingan, yang dapat digunakan untuk percabangan pada kondisi (@if) dan mixin. Perbandingan tipe kompleks seperti warna dan daftar mengikuti aturan tersendiri. Perhatikan bahwa perbandingan warna berbeda tergantung pada ruang warna.

Berikut adalah contoh yang membandingkan dua angka dan membedakan 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 dapat digabungkan dengan @if untuk aturan gaya responsif dan kondisional.

Operasi Logika (and, or, not)

SASS mendukung penggunaan and, or, dan not. Gunakan and/or untuk menggabungkan beberapa kondisi. Prioritas (precedence) dan urutan evaluasi dapat dibuat jelas dengan tanda kurung.

Berikut adalah contoh penanganan kondisi kompleks dengan operator logika.

 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}

• Prioritas antara and dan or dapat dijelaskan dengan tanda kurung. Untuk kondisi yang kompleks, penggunaan tanda kurung membantu menjaga keterbacaan dan keamanan.

Operasi String — Penggabungan dan Interpolasi

Di SASS, penggabungan string dapat dilakukan dengan + atau interpolasi #{}. Hasil dari operator + tergantung pada apakah string di kiri diberi tanda kutip atau tidak, sehingga penggunaan interpolasi #{} yang lebih dapat diprediksi akan lebih aman.

Berikut adalah contoh penggabungan dan interpolasi string.

 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 #{} menghindari masalah dengan tanda kutip dan penyisipan spasi yang tidak diinginkan.

Aritmatika warna (deprecated)

Dulu, SASS mendukung 'aritmatika warna', yang memungkinkan Anda menambah atau mengurangi angka pada warna. Namun, aritmatika warna sekarang sudah tidak didukung, dan Anda sebaiknya menggunakan fungsi dari modul sass:color untuk memanipulasi warna.

Berikut adalah contoh yang menunjukkan bahwa aritmatika warna langsung sudah deprecated dan alternatif yang disarankan.

 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.

Tanda Kurung dan Prioritas Operator

Gunakan tanda kurung untuk mengontrol urutan evaluasi dalam operasi. Tanda kurung akan selalu dievaluasi sebelum operasi di luar tanda kurung. Gunakan tanda kurung dalam ekspresi kompleks untuk menjaga keterbacaan.

Berikut adalah contoh memperjelas urutan evaluasi dengan tanda kurung.

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

• Seperti dalam matematika, aturan prioritas tetap berlaku, jadi gunakan tanda kurung agar perhitungan berlangsung sesuai urutan yang diinginkan.

Ringkasan

Saat menggunakan operator di SASS, penting untuk menulis kode dengan mempertimbangkan kompatibilitas di masa depan dan keterbacaan. Dalam ekspresi yang kompleks, perjelas urutan perhitungan dengan tanda kurung, dan utamakan keterbacaan kode.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video