Articles
Pendahuluan ke SASS/SCSS
Modul SASS

Modul SASS

Artikel ini menjelaskan tentang modul SASS.

Kami menjelaskan cara memodularisasi SASS menggunakan @use dan @forward, serta bagaimana menggunakan kembali variabel, mixin, fungsi, pengaturan tema, dan API publik.

YouTube Video

Modul SASS

Sistem modul SASS membantu membuat cakupan gaya menjadi jelas dan menyediakan desain yang mudah digunakan ulang serta mudah dipelihara.

Konsep Dasar Modul

Modul SASS mengatasi masalah pencemaran namespace global dan ketergantungan yang tidak jelas yang ada pada metode lama @import. Setiap file dimuat sebagai modul dengan namespace sendiri, dan hanya item yang diekspor secara eksplisit yang dapat diakses dari file lain.

Contoh Struktur File

Pertama, berikut adalah contoh struktur proyek yang realistis. Di bawah ini adalah contoh sistem desain kecil.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss
  • Struktur ini memudahkan modularisasi, pengujian, dan penggantian bagian.
  • File parsial memiliki garis bawah (_) di awal nama file.

Dasar-dasar @use

@use memuat modul dan menyediakan namespace. Ini mencegah tabrakan nama dan memperjelas modul sumber.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;
  • File ini adalah file sederhana yang hanya mendefinisikan variabel. Variabel yang dipublikasikan dari modul dapat dirujuk langsung dengan menggunakan @use.
1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}
  • Di sini, modul variables dirujuk dengan namespace variables.. Pendekatan ini membuat asal setiap item menjadi jelas.

Memperpendek atau Memberi Alias pada Namespace

Dengan menggunakan as, Anda dapat memperpendek nama namespace.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}
  • Ini adalah contoh mengimpor variables dengan alias yang lebih pendek vars. Pilih nama berdasarkan apakah Anda mengutamakan keterbacaan atau kemudahan pengetikan.

Definisi Mixin

Mixin dan fungsi juga dapat didefinisikan dan digunakan di dalam modul. Menjaga komentar sesuai dengan konvensi proyek membantu meningkatkan kejelasan.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}
  • File ini mendefinisikan mixin untuk container. Ini menerima argumen dan menyediakan nilai default.
1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}
  • Ini adalah contoh penggunaan mixin dengan @include.

Mendefinisikan Fungsi

Fungsi digunakan untuk mengembalikan nilai dan dapat didefinisikan serta digunakan ulang di dalam modul. Dengan mengenkapsulasi perhitungan nilai desain dalam fungsi, gaya menjadi lebih stabil dan mudah dipelihara.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}
  • File ini mendefinisikan fungsi yang mengubah nilai piksel menjadi rem. Nilai dasar default juga ditentukan.
1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}
  • Berikut adalah contoh pemanggilan fungsi menggunakan @use dan menerapkan hasilnya ke dalam sebuah gaya.

Ekspor Modul dan @forward (Desain API)

Ketika Anda ingin mengekspor beberapa file internal secara eksternal, Anda dapat menggunakan @forward untuk membuat 'API publik'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';
  • Beberapa file internal dapat dikelompokkan sebagai satu titik entri, yang kemudian menyediakan API publik. Ini memungkinkan pengguna untuk mengakses semua fitur yang dibutuhkan hanya dengan mengimpor satu titik entri.
1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}
  • Isi dari variables dan mixins dapat diakses bersama-sama melalui index. @forward membuat index menjadi lapisan publik.

Mengontrol API dengan opsi show / hide pada @forward

Jika Anda ingin mengekspor hanya variabel tertentu, gunakan opsi show atau hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;
  • Menambahkan !default memungkinkan Anda untuk mengatur nilai yang dapat ditimpa.
1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';
  • Dengan menggunakan show bersama @forward, Anda dapat membatasi API yang diekspos hanya untuk elemen yang diperlukan. Variabel dan fungsi yang digunakan secara internal tidak akan terlihat dari luar.

Membuat Modul Dapat Dikonfigurasi (dengan with)

Jika Anda menggunakan !default di dalam modul, nilai dapat ditimpa menggunakan with pada saat impor.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}
  • Modul dengan nilai default yang didefinisikan oleh !default dapat menerima konfigurasi melalui with.
1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}
  • with di dalam @use memungkinkan penimpaan variabel default pada saat impor. Ini bermanfaat untuk mengganti tema.
  • Perlu dicatat bahwa with hanya berlaku pada saat impor dan Anda tidak dapat mengubah nilai tersebut kemudian.

Contoh Praktis: Komponen Tombol (Contoh Lengkap)

Mari coba mendesain gaya tombol menggunakan modul. Pertama, pisahkan variabel dan mixin ke dalam modul masing-masing.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;
  • Variabel default untuk tombol didefinisikan di sini. Dengan menggunakan !default, pengguna dapat menimpa nilai-nilai ini.
 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}
  • Mixin dasar untuk tombol didefinisikan di sini. Mereka dipisahkan agar dapat digunakan kembali dengan mudah.
 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}
  • Gaya tombol dibuat dengan referensi namespace menggunakan @use. Sebuah varian didefinisikan sebagai .button--large.
1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins
  • Dengan mengimpor modul button, Anda dapat langsung menggunakan gaya tombol.

Penggantian Tema (Menggunakan Beberapa File Tema)

Penggantian tema dapat dilakukan dengan konfigurasi melalui with atau membuat beberapa modul terpisah dan mengganti modul mana yang digunakan dengan @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;
1// themes/_dark.scss
2$brand-color: #111827 !default;
  • Definisikan warna merek dan pengaturan lainnya dalam beberapa file tema dan ganti saat build atau impor.
1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';
  • Pilih tema dengan menggunakan with atau mengimpor, misalnya, @use 'themes/light' saat proses build.

Pribadi dan Publik (Prefiks _ dan !default)

Di SASS, menambahkan garis bawah pada awal nama file menandakan bahwa file tersebut adalah partial. Namun demikian, ketika mengelola visibilitas ekspor modul, gunakan show dan hide bersama @forward untuk mengontrol apa yang diekspor.

Anda dapat menggunakan @forward untuk mengatur API publik dan menyembunyikan implementasi internal dari luar.

Praktik Terbaik untuk Penggunaan di Dunia Nyata

Di bawah ini adalah beberapa konsep dasar yang berguna saat menggunakan SASS dalam situasi praktis. Semua panduan ini akan membantu mengurangi kebingungan saat pengembangan dan menjaga kode Anda tetap terorganisir.

  • Jika variabel kemungkinan besar akan berubah sebagai bagian dari tema, tambahkan !default. Hal ini memudahkan pengguna untuk mengganti nilai.
  • Modul sebaiknya dibagi berdasarkan tanggung jawab dan difokuskan pada satu tujuan saja. Menjadi lebih mudah untuk mengelola dengan memisahkan variabel, mixin, dan komponen.
  • Atur konten publik dengan @forward dan gunakan show atau hide sesuai kebutuhan. Menetapkan ruang lingkup apa yang bersifat publik menghasilkan desain yang lebih aman.
  • Gunakan namespace untuk memperjelas fungsi milik modul yang mana. Ini mencegah kebingungan dengan kode lain.
  • Ingat bahwa with hanya berfungsi pada saat @use. Karena Anda tidak bisa mengubahnya nanti, atur konfigurasi pada saat impor.
  • Gunakan garis bawah di awal nama file agar menjadi parsial, sehingga tidak dikompilasi secara terpisah. Ini memudahkan penggabungan file menjadi struktur yang lebih besar.
  • Menyertakan contoh penggunaan pada modul index membantu pengujian dan dokumentasi. Pengguna menjadi lebih mudah memahami perilakunya.

Dengan memperhatikan hal-hal ini, Anda akan lebih mudah mengelola proyek besar dan menjaga kode tetap dapat dibaca oleh tim.

Ringkasan

Sistem modul SASS mengorganisir kode gaya melalui namespace, API publik, dan konfigurasi yang disederhanakan. Menggunakan @use dan @forward dengan terampil membuat pengembangan tim, penggantian tema, dan desain pustaka menjadi jauh lebih mudah.

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

YouTube Video

Pewarisan dalam SASS