Fungsi SASS
Artikel ini menerangkan fungsi SASS.
Kami akan menerangkan fungsi SASS secara terperinci dari asas hingga topik lanjutan, termasuk sampel praktikal yang berguna dalam kerja sebenar.
YouTube Video
Fungsi SASS
Fungsi SASS ialah alat yang berkuasa yang merangkum logik boleh digunakan semula dalam stylesheet, membolehkan pengiraan, pemformatan dan cabang bersyarat.
Struktur Asas dan Penggunaan Fungsi
Fungsi SASS ditakrif dengan @function dan mengembalikan nilai menggunakan @return. Fungsi dipanggil dengan cara yang sama seperti fungsi terbina dalam.
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}- Kod ini mentakrifkan fungsi yang menggandakan suatu nombor dan menerapkannya pada lebar. Hasilnya,
.example { width: 20px; }akan dijana.
Argumen, Nilai Lalai, dan Pengendalian Jenis
Fungsi boleh menerima beberapa argumen dan menetapkan nilai lalai. SASS tidak mengenakan pengesahan jenis statik, tetapi memberi perhatian kepada format argumen akan menjadikan fungsi anda lebih kukuh.
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-fontmempunyai nilai lalai untukscaledanunit, dan beberapa argumen boleh ditinggalkan semasa memanggilnya. Dalam contoh ini, nilai sepertifont-size: 20px;akan dihasilkan.
Menggunakan Argumen Variadik (...)
Gunakan argumen variadik jika anda ingin menghantar beberapa nilai. Ini berguna untuk mengendalikan senarai atau pelbagai 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...dilayan sebagai senarai dan boleh diproses menggunakan@each. Dalam contoh ini,padding: 20px;akan dihasilkan.
Memulangkan dan Memanipulasi Senarai atau Peta (Map)
Fungsi juga boleh memulangkan senarai (dipisahkan dengan ruang atau koma) dan peta (map). Ini berguna untuk memulangkan 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}- Peta akan dikembalikan oleh fungsi, dan kemudian nilai diambil dengan
map.get. Ini membolehkan anda mengekalkan sistem jarak yang konsisten.
Fungsi dengan Bersyarat dan Gelung (Loop)
@if, @else if, @else, @for, @each, dan @while semuanya boleh digunakan dalam fungsi. Anda boleh membuat logik pengiraan dengan bersyarat dan gelung.
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 mengira skala modular dan mendarab atau membahagi bergantung kepada langkah positif atau negatif.
modular-scale(3, 1rem, 1.333)memulangkan saiz fon tiga langkah di atas asas.
Pengendalian Ralat dan Amaran (@error, @warn)
Anda boleh menghentikan dengan @error jika argumen tidak sah atau operasi tidak dijangka, dan mengeluarkan amaran menggunakan @warn. Tujuannya adalah untuk memberitahu pengguna tentang masalah lebih awal.
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 menghantar nilai tidak sah, ralat akan dijana sewaktu pembinaan dan memudahkan pengesanan punca masalah. Pemeriksaan dalam fungsi berguna untuk pengesanan pepijat awal.
Mencipta Fungsi Khusus Warna
Dalam SASS, anda boleh menggabungkan pelbagai fungsi yang memanipulasi warna untuk mencipta palet warna anda sendiri. Ini berguna untuk menguruskan skema warna yang konsisten di seluruh projek 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.mixdigunakan untuk menghasilkan bayangan dengan mencampurkan warna hitam dan tona dengan mencampurkan warna putih. Nilai-nilai dikembalikan dalam senarai, dan boleh diakses menggunakanlist.nth.
Nota tentang Prestasi dan Masa Kompilasi
Fungsi SASS dinilai semasa masa kompilasi. Gelung berat, rekursi mendalam, atau operasi peta yang banyak akan meningkatkan masa kompilasi. Pastikan fungsi ringkas dan kecil; pertimbangkan untuk melaksanakan pemprosesan kompleks di luar SASS, dalam alatan binaan atau preprocessor, jika perlu.
Koleksi Fungsi Utiliti Praktikal
Berikut adalah beberapa fungsi utiliti yang sering digunakan. Kod ini direka untuk boleh digunakan serta-merta dalam projek sebenar.
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-valuemengenakan had atas dan bawah pada nilai, danpx-to-remmenukar nilai piksel kepada rem. Kedua-dua ini memudahkan proses yang sering timbul dalam reka bentuk responsif.
Memilih Antara @function dan Mixin (@mixin)
Fungsi khusus untuk memulangkan nilai, manakala mixin mengeluarkan blok CSS. Jika hasil logik adalah satu nilai sifat, gunakan fungsi; jika keseluruhan 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 memulangkan nilai seperti nombor atau warna untuk digunakan pada sifat lain, manakala mixin terus memasukkan kumpulan sifat. Pemisahan yang jelas dalam reka bentuk meningkatkan kemudahan penyelenggaraan.
Pengendalian Rentetan dan Pertimbangan Format Output
Berhati-hati apabila mengendalikan nombor dengan unit dan rentetan dalam SASS. Menyambungkan rentetan ke nombor dengan unit mungkin menghasilkan output tidak dijangka. Gunakan unquote() atau interpolasi rentetan (#{}) mengikut keperluan.
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}- Apabila memulangkan peratusan sebagai rentetan, uruskan ketepatan dengan interpolasi atau
rounduntuk lebih jelas. Untuk mengelakkan pepijat, sentiasa kendalikan jenis data dengan jelas apabila menggabungkan hasil pengiraan dengan rentetan.
Amalan Terbaik untuk Ujian dan Dokumentasi
Selepas menulis fungsi, buat fail SCSS kecil bersama contoh penggunaan sebagai ujian, supaya penyelenggaraan lebih mudah. Anda boleh mendokumentasikan bagi setiap fungsi jenis/unit input, jenis pulangan, tingkah laku kegagalan, dan contoh penggunaan.
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)";- Meninggalkan ulasan bersama contoh kecil ‘output dijangka’ memudahkan pengesanan kemunduran semasa refaktor masa depan. Menyusun secara automatik dalam persekitaran CI dan menyemak output secara visual adalah berkesan.
Ringkasan
Fungsi SASS ialah cara berkuasa untuk meningkatkan kebolehgunaan semula dan konsistensi dalam gaya. Reka bentuk fungsi agar ringkas dan kecil, serta pastikan keselamatan dengan @error dan @warn. Fungsi utiliti untuk warna, jarak dan penukaran unit mudah digabungkan ke dalam pustaka bersama. Untuk mengelakkan beban kompilasi, pertimbangkan untuk memisahkan pemprosesan kompleks ke langkah binaan lain apabila perlu.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.