Articles
Pendahuluan ke SASS/SCSS
Mixin dalam SASS

Mixin dalam SASS

Artikel ini menjelaskan tentang mixin dalam SASS.

Kami akan menjelaskan mixin dalam SASS dengan contoh praktis.

YouTube Video

Mixin dalam SASS

Gambaran Umum – Apa itu Mixin?

Mixin adalah mekanisme yang memungkinkan Anda mendefinisikan kumpulan properti gaya yang sering digunakan sebagai fungsi yang dapat digunakan kembali, yang dapat Anda panggil di mana pun diperlukan. Mereka sangat berguna untuk menjaga kelas CSS dan beberapa properti Anda tetap DRY (Don't Repeat Yourself - Jangan Ulang Kode Anda).

Contoh: Mixin yang paling sederhana

Di bawah ini adalah contoh sederhana dari sebuah mixin yang menggabungkan penggunaan border-radius dan box-shadow. Dengan memanggil mixin ini, Anda dapat menerapkan tampilan yang sama ke beberapa 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 mengulang gaya secara langsung.
  • Memanggilnya hanya perlu satu baris: @include card-style;.

Mixin dengan Argumen (Parameter)

Mixin dapat menerima argumen, sama seperti fungsi. Hal ini memungkinkan Anda mengubah tampilan dengan logika yang sama. Berikutnya adalah contoh di mana warna digunakan 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 memberikan nilai default, Anda dapat mengontrol perilaku jika argumen tidak diberikan.
  • Dalam contoh ini, radius default digunakan dan hanya warna latar belakang yang diganti.

Kasus di mana argumen variadik (...) digunakan

Jika Anda ingin menerima beberapa nilai, Anda dapat menggunakan argumen variadik ($args...). Ini berguna untuk menghasilkan class utilitas atau melewatkan daftar fallback.

Ini berguna saat Anda perlu melewatkan banyak keluarga font atau beberapa nilai bayangan.

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}
  • Di sisi pemanggil, Anda dapat memberikan beberapa bayangan yang dipisahkan dengan koma.
  • Dengan cara ini, Anda bisa menggunakan mixin yang sama baik untuk bayangan sederhana maupun kompleks.

Mixin dengan @content — Menerima Blok

Dengan @content, suatu mixin dapat menerima satu blok gaya dari pemanggil. Hal ini memungkinkan mixin menyediakan pembungkus umum, sementara pemanggil menentukan detail 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}
  • Di sisi pemanggil, Anda dapat menambahkan blok pada @include untuk memasukkan gaya di dalamnya.
  • Pola ini berguna untuk pembungkus layout seperti grid, card, dan form.

Mixin Lanjut Menggunakan Kondisional dan Perulangan

Struktur kontrol seperti @if dan @for dapat digunakan di dalam mixin. Anda dapat menggunakannya untuk mengotomatisasi pembuatan utilitas dan mengelompokkan pengaturan responsif.

Di bawah ini adalah contoh otomatisasi pembuatan lebar class utilitas.

 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 memberikan peta fraksi yang ingin Anda buat di sisi pemanggil, Anda dapat secara otomatis menghasilkan kelas utilitas yang sesuai sekaligus.
  • Menggunakan pendekatan ini memiliki keuntungan yaitu mengurangi definisi gaya secara manual sekaligus menjaga konsistensi dalam desain Anda.

Mixin vs Placeholder (%placeholder)

Sementara mixin secara langsung menyisipkan sekumpulan properti, placeholder digunakan dengan @extend saat mewarisi gaya. Mixin dapat menghasilkan CSS yang duplikat dalam beberapa kasus, tetapi @extend dapat menghasilkan CSS yang lebih ringkas dalam situasi tertentu.

Dengan memahami tujuan dan perbedaan CSS yang dihasilkan oleh masing-masing metode, Anda akan dapat memilih pendekatan yang paling optimal.

 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}
  • Ketika Anda melakukan @extend pada placeholder, beberapa selector dapat digabungkan ke dalam satu aturan, sehingga menghasilkan CSS yang lebih ringkas.
  • Di sisi lain, karena mixin menyisipkan properti secara langsung di tempat yang diperlukan, hal itu menawarkan fleksibilitas dan membantu menghindari penggabungan selector yang tidak disengaja.

Pola Praktis Umum (Responsif, Prefix Vendor, dll.)

Dalam praktiknya, sangat berguna untuk mengelompokkan proses umum seperti prefix vendor dan fitur responsif ke dalam mixin. Di bawah ini adalah contoh yang menggabungkan transform dan properti prefix. Anda dapat memusatkan kode untuk kompatibilitas browser, sehingga perawatan 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 sederhana dan dapat digunakan di mana saja, seperti @include transform(rotate(10deg));.
  • Bahkan jika prefix tidak diperlukan lagi di masa depan, pemeliharaan menjadi lebih mudah karena memperbarui mixin akan langsung berdampak pada seluruh kode Anda.

Contoh Praktis: Kombinasi Kartu dan Tombol

Di bawah ini adalah contoh di mana gaya tombol yang digunakan di dalam kartu disatukan dengan mixin, sehingga dapat diubah sesuai dengan warna tema.

Hal ini mengatur pola 'kartu + tombol' yang sering dipakai 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 dapat menulis komponen dengan ringkas.

Perhatikan Performa dan CSS yang Dihasilkan

Karena mixin memasukkan properti setiap kali dipanggil, penggunaan @include secara berlebihan untuk aturan yang sama bisa membuat CSS akhir Anda menjadi lebih besar. Anda dapat mengoptimalkannya dengan menggabungkan placeholder dan desain komponen saat diperlukan.

Selain itu, langkah-langkah berikut juga efektif.

  • Gaya yang sering digunakan sebaiknya dibuat menjadi kelas untuk digunakan kembali.
  • Pola umum sebaiknya digabungkan menggunakan @content.
  • Pembuatan utilitas kompleks sebaiknya hanya dilakukan pada saat build.

Tips untuk Memudahkan Debugging

Saat menggunakan mixin, penting juga untuk merancang metode guna meningkatkan debugging dan maintainability. Dengan menggunakan nama variabel yang jelas dan menambahkan komentar di dalam mixin, kode akan lebih mudah dipahami saat ditinjau di kemudian hari. Selain itu, jika fungsinya menjadi kompleks, membagi mixin menjadi unit-unit yang lebih kecil akan mempermudah pengujian dan meningkatkan maintainability.

Selain itu, mengaktifkan source map memungkinkan Anda dengan mudah melacak mixin mana yang menghasilkan CSS tertentu, sehingga memudahkan isolasi masalah.

Di bawah ini adalah contoh mixin yang mudah dipahami dengan komentar 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}
  • Memiliki komentar dokumentasi yang tertata seperti ini memudahkan untuk berbagi dan memahami dalam tim.
  • Karena komentar dokumentasi SASS dapat diekstrak secara otomatis dengan alat yang kompatibel, ini juga berguna untuk membuat dokumen seperti panduan gaya.

Ringkasan

Karena mixin memungkinkan Anda mengelompokkan gaya yang sering digunakan agar bisa dipakai ulang, mereka membantu mengurangi duplikasi kode dan meningkatkan kemudahan pemeliharaan. Selain itu, jika beberapa selector menggunakan aturan yang sama, pertimbangkan untuk menggunakan tidak hanya mixin tetapi juga @extend (placeholder). Selain itu, meskipun @content memungkinkan pemisahan layout wrapper dan konten dengan fleksibel, penggunaan @include yang berlebihan dapat membuat CSS yang dihasilkan menjadi besar, jadi tetap perhatikan penggunaannya. Penting untuk memanfaatkan argumen, nilai default, dan argumen variadik secara maksimal agar mixin menjadi generik dan mudah dikembangkan.

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

YouTube Video

Modul Bawaan SASS