Fungsi SASS

Artikel ini menjelaskan tentang fungsi SASS.

Kami akan menjelaskan fungsi SASS secara menyeluruh, mulai dari dasar hingga topik lanjutan, termasuk contoh praktis yang berguna dalam pekerjaan nyata.

YouTube Video

Fungsi SASS

Fungsi SASS adalah alat yang kuat untuk memuat logika yang dapat digunakan kembali dalam stylesheet, memungkinkan perhitungan, pemformatan, dan percabangan kondisional.

Struktur Dasar dan Penggunaan Fungsi

Fungsi SASS didefinisikan dengan @function dan mengembalikan nilai menggunakan @return. Fungsi dipanggil dengan cara yang sama seperti fungsi bawaan.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Kode ini mendefinisikan sebuah fungsi yang menggandakan angka dan menerapkannya pada lebar. Sebagai hasilnya, .example { width: 20px; } akan dihasilkan.

Argumen, Nilai Bawaan, dan Penanganan Tipe

Fungsi dapat menerima beberapa argumen dan menetapkan nilai bawaan. SASS tidak menerapkan pengetikan statis, tetapi memperhatikan format argumen membuat fungsi Anda lebih kuat.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font memiliki nilai bawaan untuk scale dan unit, dan beberapa argumen dapat diabaikan saat memanggilnya. Dalam contoh ini, nilai seperti font-size: 20px; akan dihasilkan.

Menggunakan Argumen Variadik (...)

Gunakan argumen variadik jika Anda ingin meneruskan beberapa nilai. Ini berguna untuk menangani daftar ataupun banyak warna.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Argumen variadik seperti $numbers... dianggap sebagai daftar dan dapat diproses menggunakan @each. Dalam contoh ini, padding: 20px; akan dihasilkan.

Mengembalikan dan Memanipulasi Daftar atau Map

Fungsi juga dapat mengembalikan daftar (dipisahkan dengan spasi atau koma) dan map. Ini berguna untuk mengembalikan nilai yang kompleks.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• Sebuah peta dikembalikan oleh fungsi tersebut, kemudian nilainya diambil dengan map.get. Ini memungkinkan Anda menjaga sistem spasi yang konsisten.

Fungsi dengan Kondisional dan Perulangan

@if, @else if, @else, @for, @each, dan @while semuanya dapat digunakan di dalam fungsi. Anda dapat membuat logika perhitungan menggunakan kondisional dan perulangan.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Fungsi ini menghitung skala modular dan mengalikan atau membagi tergantung langkah positif atau negatif. modular-scale(3, 1rem, 1.333) mengembalikan ukuran font tiga langkah di atas ukuran dasar.

Penanganan Error dan Peringatan (@error, @warn)

Anda dapat menghentikan eksekusi dengan @error pada argumen tidak valid atau operasi tak terduga, serta memberikan peringatan menggunakan @warn. Tujuannya adalah untuk memberi tahu pengguna tentang masalah sedini mungkin.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Jika Anda mengirimkan nilai tidak valid, error akan muncul saat build, sehingga penyebabnya lebih mudah ditemukan. Pengecekan dalam fungsi berguna untuk deteksi bug sejak dini.

Membuat Fungsi Khusus Warna

Di SASS, Anda dapat menggabungkan berbagai fungsi yang memanipulasi warna untuk membuat palet warna Anda sendiri. Ini berguna untuk mengelola skema warna yang konsisten di seluruh proyek Anda.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• Dalam contoh ini, color.mix digunakan untuk membuat warna gelap dengan mencampur warna hitam dan warna terang dengan mencampur warna putih. Nilai-nilai dikembalikan dalam sebuah daftar, dan dapat diakses menggunakan list.nth.

Catatan Tentang Performa dan Waktu Kompilasi

Fungsi SASS dievaluasi saat waktu kompilasi. Perulangan berat, rekursi mendalam, atau operasi map yang ekstensif akan meningkatkan waktu kompilasi. Buat fungsi tetap sederhana dan ringkas; pertimbangkan memproses hal kompleks di luar SASS, seperti pada alat build atau preprocessor, jika diperlukan.

Kumpulan Fungsi Utilitas Praktis

Berikut beberapa fungsi utilitas yang sering digunakan. Kodenya dirancang agar langsung dapat digunakan pada proyek nyata.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value memberlakukan batas atas dan bawah pada sebuah nilai, dan px-to-rem mengubah nilai piksel menjadi rem. Keduanya memudahkan proses yang sering muncul dalam desain responsif.

Memilih Antara @function dan Mixin (@mixin)

Fungsi khusus mengembalikan nilai, sedangkan mixin menghasilkan blok CSS. Jika hasil logikanya adalah satu nilai properti, gunakan fungsi; jika berupa satu blok gaya, gunakan mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Fungsi mengembalikan nilai seperti angka atau warna untuk digunakan pada properti lain, sedangkan mixin menyisipkan sekelompok properti secara langsung. Pemisahan tegas dalam desain meningkatkan kemudahan pemeliharaan.

Manipulasi String dan Pertimbangan Format Output

Harap berhati-hati saat menangani angka dengan satuan dan string di SASS. Menggabungkan string dengan angka beserta satuan bisa menghasilkan output yang tidak diinginkan. Gunakan unquote() atau interpolasi string (#{}) sesuai kebutuhan.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Saat mengembalikan persentase dalam bentuk string, atur presisi menggunakan interpolasi atau round untuk hasil yang lebih jelas. Agar terhindar dari bug, selalu tangani tipe data dengan jelas saat menggabungkan hasil perhitungan dengan string.

Praktik Terbaik Untuk Pengujian dan Dokumentasi

Setelah menulis fungsi, buat file SCSS kecil berisi contoh penggunaan sebagai pengujian, sehingga pemeliharaan menjadi lebih mudah. Anda dapat mendokumentasikan untuk setiap fungsi jenis/satuan input, jenis return, perilaku saat gagal, dan contoh penggunaannya.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Memberi komentar berisi contoh output yang diharapkan memudahkan menemukan regresi saat refaktor di masa mendatang. Melakukan kompilasi otomatis pada lingkungan CI dan memeriksa hasilnya secara visual sangat efektif.

Ringkasan

Fungsi SASS adalah cara yang ampuh untuk meningkatkan penggunaan kembali dan konsistensi dalam gaya. Rancang fungsi agar ringkas dan sederhana, serta jaga keamanannya dengan menggunakan @error dan @warn. Fungsi utilitas untuk warna, spasi, dan konversi satuan sebaiknya dikonsolidasikan ke dalam library bersama. Untuk menghindari beban lebih saat kompilasi, pertimbangkan pemisahan proses kompleks ke tahap build lain jika diperlukan.

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

YouTube Video