Mixin dalam SASS

Artikel ini menerangkan tentang mixin dalam SASS.

Kami akan menerangkan mixin dalam SASS dengan contoh praktikal.

YouTube Video

Mixin dalam SASS

Gambaran keseluruhan – Apa itu Mixin?

Mixin ialah satu mekanisme yang membolehkan anda menentukan set sifat gaya yang biasa digunakan sebagai fungsi boleh diguna semula, yang boleh anda panggil di mana-mana sahaja diperlukan. Ia sangat berguna untuk memastikan kelas dan pelbagai sifat CSS anda tetap DRY (Don't Repeat Yourself/Jangan Ulangi Diri Sendiri).

Contoh: Mixin yang paling mudah

Di bawah ialah contoh mudah mixin yang menggunakan semula border-radius dan box-shadow bersama. Dengan memanggil mixin ini, anda boleh mengaplikasikan penampilan yang sama pada pelbagai elemen.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}

• Dengan mixin ini, anda tidak perlu lagi mengulangi gaya secara langsung.
• Memanggilnya hanya memerlukan satu baris: @include card-style;.

Mixin dengan Argumen (Parameter)

Mixin boleh menerima argumen, sama seperti fungsi. Ini membolehkan anda menukar penampilan dengan logik yang sama. Seterusnya ialah contoh di mana warna diambil sebagai argumen.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}

• Dengan menyediakan nilai lalai, anda boleh mengawal tingkah laku apabila argumen tidak diberikan.
• Dalam contoh ini, radius lalai digunakan dan hanya warna latar belakang ditukar.

Kes di mana argumen variadik (...) digunakan

Apabila anda ingin menerima pelbagai nilai, anda boleh menggunakan argumen variadik ($args...). Ini berguna untuk menjana kelas utiliti atau menghantar senarai sandaran.

Ia membantu apabila anda perlu menghantar pelbagai font family atau pelbagai nilai shadow.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}

• Pada sisi pemanggil, anda boleh menghantar pelbagai shadow dipisahkan dengan koma.
• Dengan cara ini, anda boleh gunakan mixin sama untuk shadow ringkas mahupun kompleks.

Mixin dengan @content — Menerima Satu Blok

Dengan @content, mixin boleh menerima satu blok gaya daripada pemanggil. Ini membolehkan mixin menyediakan pembungkus bersama, sementara pemanggil menetapkan perincian di dalamnya.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}

• Pada sisi pemanggil, anda boleh menambah satu blok pada @include untuk memasukkan gaya di dalamnya.
• Corak ini berguna untuk pembungkus susun atur seperti grid, kad, dan borang.

Mixin Lanjutan Menggunakan Syarat dan Gelung

Struktur kawalan seperti @if dan @for boleh digunakan dalam mixin. Anda boleh gunakan ini untuk mengautomasi penjanaan utiliti dan mengumpulkan tetapan responsive.

Di bawah ialah contoh bagaimana menjana lebar kelas utiliti secara automatik.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);

• Dengan hanya menghantar peta pecahan yang anda ingin jana di bahagian pemanggil, anda boleh menjana kelas utiliti yang sepadan secara automatik sekaligus.
• Menggunakan pendekatan ini mempunyai kelebihan dalam mengurangkan definisi gaya secara manual sambil mengekalkan konsistensi dalam reka bentuk anda.

Mixin vs Placeholder (%placeholder)

Walaupun mixin memasukkan satu set sifat secara langsung, placeholder digunakan bersama @extend semasa mewarisi gaya. Mixins mungkin menjana CSS yang berulang dalam sesetengah keadaan, tetapi @extend boleh menghasilkan CSS yang lebih padat dalam situasi tertentu.

Dengan memahami tujuan dan perbezaan CSS yang dijana oleh setiap kaedah, anda akan dapat memilih pendekatan yang paling optimum.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}

• Apabila anda menggunakan @extend pada placeholder, pelbagai pemilih boleh digabungkan ke dalam satu peraturan, menghasilkan CSS yang lebih padat.
• Sebaliknya, memandangkan mixin memasukkan sifat secara langsung di tempat yang diperlukan, ia menawarkan fleksibiliti dan membantu mengelakkan penyatuan pemilih yang tidak disengajakan.

Corak Praktikal Biasa (Responsif, Awalan Vendor, dsb.)

Dalam amalan, adalah berguna untuk meletakkan proses biasa seperti awalan vendor dan ciri responsif ke dalam mixin. Di bawah ialah contoh yang menggabungkan sifat transform dan prefix. Anda boleh memusatkan kod untuk keserasian pelayar, menjadikan penyelenggaraan lebih mudah.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}

• Penggunaannya adalah mudah dan anda boleh menggunakannya di mana-mana sahaja, seperti @include transform(rotate(10deg));.
• Walaupun awalan mungkin tidak diperlukan pada masa hadapan, penyelenggaraan menjadi lebih mudah kerana mengemas kini mixin akan mencerminkan perubahan di seluruh pangkalan kod anda.

Contoh Praktikal: Gabungan Kad dan Butang

Di bawah ialah contoh di mana gaya butang yang digunakan dalam kad diseragamkan dengan mixin, membolehkan gaya tersebut ditukar mengikut warna tema.

Ini mengatur corak 'kad + butang' yang biasa digunakan dengan menggunakan mixin.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}

• Dengan menggunakan mixin ini, anda boleh menulis komponen dengan ringkas.

Perhatikan Prestasi dan CSS yang Dihasilkan

Oleh kerana mixin memasukkan sifat setiap kali ia dipanggil, penggunaan @include secara meluas untuk peraturan yang sama boleh menjadikan CSS akhir anda lebih besar. Anda boleh mengoptimumkan dengan menggabungkan bersama placeholder dan reka bentuk komponen jika perlu.

Selain itu, langkah-langkah berikut juga berkesan.

• Gaya yang kerap digunakan sepatutnya dijadikan kelas untuk digunakan semula.
• Corak biasa harus digabungkan menggunakan @content.
• Penjanaan utiliti kompleks hanya perlu dilakukan semasa waktu binaan (build time) sahaja.

Petua untuk Memudahkan Pengesanan Ralat

Apabila menggunakan mixin, adalah penting juga untuk merancang kaedah bagi memperbaiki penyesuaian pepijat dan penyelenggaraan. Dengan menggunakan nama pembolehubah yang jelas dan menambah ulasan dalam mixin, ia akan menjadi lebih mudah untuk difahami semasa menyemak kod kemudian. Selain itu, jika fungsi menjadi lebih kompleks, membahagikan mixin kepada unit yang lebih kecil akan memudahkan ujian dan memperbaiki penyelenggaraan.

Di samping itu, mengaktifkan peta sumber (source maps) membolehkan anda menjejaki dengan mudah mixin yang menjana CSS tertentu, seterusnya memudahkan pengasingan masalah.

Di bawah adalah contoh mixin yang mudah difahami dengan ulasan dokumentasi.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}

• Mempunyai ulasan dokumentasi yang teratur seperti ini akan memudahkan perkongsian dan pemahaman dalam pasukan.
• Oleh kerana ulasan dokumentasi SASS boleh diekstrak secara automatik dengan alat yang serasi, ia juga berguna untuk menjana dokumen seperti panduan gaya.

Ringkasan

Oleh kerana mixin membolehkan anda menggabungkan gaya yang kerap digunakan untuk guna semula, ia membantu mengurangkan penduaan kod dan meningkatkan kebolehselenggaraan. Selain itu, apabila pelbagai selector berkongsi aturan sama, pertimbangkan untuk guna bukan sahaja mixin tetapi juga @extend (placeholder). Tambahan pula, walaupun @content membolehkan pemisahan fleksibel untuk pembungkus susun atur dan kandungan, penggunaan @include secara berlebihan boleh menyebabkan CSS yang dijana menjadi besar, jadi berhati-hati. Adalah penting untuk memanfaatkan sepenuhnya argumen, nilai lalai dan argumen variadik untuk mereka mixin yang generik dan mudah dipanjangkan.

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

YouTube Video