Bendera `!default` dalam SASS

Artikel ini menerangkan tentang flag !default dalam SASS.

Kami akan menerangkan tentang flag !default secara terperinci dan menunjukkan cara menggunakannya dengan contoh praktikal.

YouTube Video

Bendera !default dalam SASS

Bendera !default dalam SASS adalah alat penting untuk meningkatkan modulariti dan kebolehgunaan semula stylesheet. Dengan menggunakan bendera ini, anda boleh menetapkan nilai lalai untuk pembolehubah sambil membenarkan nilai yang ditetapkan di tempat lain untuk diutamakan. Di sini, kami akan menerangkan bendera !default secara terperinci dan menunjukkan penggunaannya dengan contoh praktikal.

Bendera !default ialah ciri khusus SASS yang digunakan untuk menetapkan nilai lalai bagi pembolehubah. Dengan menambah bendera ini, tingkah laku berikut akan dicapai:.

• Menentukan Nilai Lalai Nilai hanya akan ditetapkan jika pembolehubah tidak ditetapkan di tempat lain.

• Mengawal Keutamaan Jika pembolehubah sudah ditetapkan, nilainya tidak akan ditulis ganti.

Ciri ini sangat berguna apabila membina modul dan perpustakaan. Pengguna boleh menetapkan nilai tersuai, tetapi jika tiada yang ditetapkan, nilai lalai akan digunakan.

Contoh Asas

Kod berikut menunjukkan penggunaan asas bendera !default.

1// _variables.scss
2$primary-color: blue !default;

• Mentakrifkan pemboleh ubah default $primary-color menggunakan flag !default.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Mengimport pemboleh ubah menggunakan @use dan menimpa $primary-color dengan with.

CSS Output

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

• Dalam contoh ini, kerana $primary-color ditetapkan kepada red dalam main.scss, nilai blue yang ditakrifkan dalam _variables.scss tidak akan digunakan.

Apabila Pembolehubah Tidak Ditetapkan

Jika pembolehubah tidak ditetapkan dalam main.scss, nilai lalai akan digunakan.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Oleh kerana pemboleh ubah diimport tanpa menimpa, nilai default blue untuk $primary-color yang ditakrifkan dalam _variables.scss akan digunakan.

CSS Output

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

Penggunaan dalam Modul Bersarang

Menggunakan !default di dalam modul membolehkan penyesuaian yang fleksibel.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• Mentakrifkan $primary-color dan $button-color dengan flag !default.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Mengimport modul variables dan menentukan warna .button menggunakan pemboleh ubah $button-color.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• Menggunakan @use bersama with untuk menimpa $button-color dengan orange, serta menggunakan modul buttons.

CSS Output

1.button {
2    color: orange;
3}

• Dengan cara ini, modul memberikan nilai lalai sambil menghormati tetapan yang ditetapkan oleh pengguna.

Perkara Penting

Apabila menggunakan bendera !default, perkara-perkara berikut perlu diberi perhatian:.

• Memilih Nilai Lalai yang Sesuai Nilai lalai perlu dipilih untuk meliputi kebanyakan kegunaan biasa.

• Reka bentuk Berhasrat Gunakan nama pembolehubah yang konsisten dan elakkan konflik dengan modul lain.

• Pengesahan Susunan Untuk membolehkan bendera !default berfungsi seperti yang dihasratkan, susunan penimpaan pembolehubah mesti diuruskan dengan betul.

Senario Praktikal

Pertukaran Tema

Sebagai contoh, apabila membangunkan perpustakaan yang menyokong tema, anda boleh menggunakan !default untuk menyediakan nilai lalai yang boleh diubah suai.

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}

• Mentakrifkan $background-color dan $text-color dengan flag !default untuk tema, serta 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.

CSS Output

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

Komponen Boleh Digunakan Semula

Dalam komponen butang yang boleh digunakan semula, anda boleh menyediakan gaya lalai sambil membenarkan pengguna untuk menukar 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}

• Mentakrifkan warna latar belakang dan teks default untuk butang dengan !default serta menerapkan gaya-gayanya.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Menyesuaikan warna butang dengan menimpa $button-bg menggunakan @use dan with.

CSS Output

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

Ringkasan tentang Bendera !default

Bendera !default dalam SASS ialah alat berkuasa ketika membina modul dan perpustakaan. Ia meningkatkan kebolehgunaan semula dan membolehkan penyesuaian yang fleksibel.

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

YouTube Video