Articles
Pendahuluan ke SASS/SCSS
Flag `!default` di SASS

Flag `!default` di SASS

Artikel ini menjelaskan flag !default di SASS.

Kami akan menjelaskan flag !default secara rinci dan menunjukkan cara menggunakannya dengan contoh praktis.

YouTube Video

Flag !default di SASS

Flag !default di SASS adalah alat penting untuk meningkatkan modularitas dan penggunaan ulang stylesheet. Dengan menggunakan flag ini, Anda dapat mengatur nilai default untuk variabel, namun membiarkan nilai yang didefinisikan di tempat lain memiliki prioritas. Di sini, kami akan menjelaskan flag !default secara rinci dan mendemonstrasikan penggunaannya dengan contoh praktis.

Flag !default adalah fitur khusus SASS untuk mengatur nilai default pada variabel. Dengan menambahkan flag ini, perilaku berikut akan terjadi:.

  • Menentukan Nilai Default Nilai hanya akan disetel jika variabel belum didefinisikan di tempat lain.

  • Mengatur Prioritas Jika variabel sudah didefinisikan, nilainya tidak akan ditimpa.

Fitur ini sangat berguna saat membangun modul dan pustaka. Pengguna dapat mengatur nilai khusus, tetapi jika tidak ada yang ditentukan, nilai default akan digunakan.

Contoh Dasar

Kode berikut menunjukkan penggunaan dasar dari flag !default.

1// _variables.scss
2$primary-color: blue !default;
  • Menetapkan variabel default $primary-color menggunakan penanda !default.
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • Mengimpor variabel menggunakan @use dan menimpa $primary-color dengan with.

Output CSS 

1body {
2    background-color: red;
3}
  • Pada contoh ini, karena $primary-color diatur ke red di main.scss, nilai blue yang didefinisikan di _variables.scss tidak akan digunakan.

Ketika Variabel Tidak Didefinisikan

Jika variabel tidak didefinisikan di main.scss, maka nilai default akan digunakan.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • Karena variabel diimpor tanpa penimpaan, nilai default blue untuk $primary-color yang didefinisikan di _variables.scss akan diterapkan.

Output CSS 

1body {
2    background-color: blue;
3}

Penggunaan pada Modul Bersarang

Penggunaan !default di dalam modul memungkinkan kustomisasi yang fleksibel.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • Menetapkan $primary-color dan $button-color dengan penanda !default.
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • Mengimpor modul variables dan menentukan warna .button menggunakan variabel $button-color.
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • Menggunakan @use dengan with untuk menimpa $button-color dengan orange, serta menggunakan modul buttons.

Output CSS 

1.button {
2    color: orange;
3}
  • Dengan cara ini, modul memberikan nilai default sambil tetap menghormati pengaturan yang ditentukan pengguna.

Poin yang Perlu Diperhatikan

Ketika menggunakan flag !default, hal-hal berikut harus diperhatikan:.

  • Memilih Nilai Default yang Tepat Nilai default sebaiknya dipilih untuk menutupi kasus penggunaan umum.

  • Desain yang Terencana Gunakan nama variabel yang konsisten dan hindari konflik dengan modul lain.

  • Verifikasi Urutan Agar flag !default berfungsi seperti yang diinginkan, urutan override variabel harus dikelola dengan benar.

Skenario Praktis

Penggantian Tema

Misalnya, saat membuat pustaka yang mendukung tema, Anda dapat menggunakan !default untuk menyediakan nilai default yang bisa dikustomisasi.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • Menetapkan $background-color dan $text-color dengan penanda !default untuk tema, dan menerapkannya pada body.
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • Menyesuaikan tema dengan menimpa $background-color menggunakan @use dan with.

Output CSS 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Komponen yang Dapat Digunakan Kembali

Pada komponen tombol yang dapat digunakan kembali, Anda dapat memberikan gaya default sambil membiarkan pengguna menimpa warna.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • Menetapkan warna latar belakang dan teks default untuk tombol dengan !default dan menerapkan gaya tersebut.
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • Menyesuaikan warna tombol dengan menimpa $button-bg menggunakan @use dan with.

Output CSS 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Ringkasan tentang Flag !default

Flag !default di SASS adalah alat yang sangat berguna saat membuat modul dan pustaka. Ini meningkatkan kemampuan penggunaan ulang sekaligus memungkinkan kustomisasi yang fleksibel.

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

YouTube Video

Variabel SASSFlag `!global` di SASS