Flag `!global` di SASS

Artikel ini menjelaskan flag !global dalam SASS.

Kami akan menjelaskan mekanisme secara detail, contoh penggunaan, dan perhatian khusus dari flag !global.

YouTube Video

Flag !global di SASS

Di SASS, flag !global digunakan untuk mengatur ruang lingkup variabel. Dengan memahami flag ini dengan benar dan menggunakannya secara tepat, Anda dapat mencegah perilaku tak terduga dalam kode Anda dan meningkatkan pemeliharaan.

Apa itu Flag !global?

Secara umum, variabel SASS memiliki ruang lingkup (scope). Secara default, variabel hanya berlaku dalam ruang lingkup di mana mereka didefinisikan. Dengan kata lain, jika sebuah variabel didefinisikan di dalam fungsi atau mixin, variabel tersebut tidak dapat diakses di luar lingkup tersebut.

Namun, dengan menggunakan flag !global, Anda dapat menetapkan variabel secara langsung ke ruang lingkup global. Ini memungkinkan variabel dibagikan di berbagai ruang lingkup.

Tanpa Flag !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• Pada kode ini, $color didefinisikan pada ruang lingkup global, sehingga properti color dari .change tetap red.

Output CSS

1.change {
2    color: red;
3}

Dengan Flag !global

Mari kita tambahkan flag !global pada contoh yang sama.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• Dalam kasus ini, karena flag !global ditentukan, nilai dari $color diperbarui di ruang lingkup global. Akibatnya, properti color dari .change menjadi blue.

Output CSS

1.change {
2    color: blue;
3}

Perhatian dalam Penggunaan

• Polusi Ruang Lingkup Global Penggunaan flag !global yang berlebihan dapat menyebabkan konflik ruang lingkup yang tidak diinginkan serta polusi pada ruang lingkup global. Hal ini sangat penting terutama dalam proyek besar, di mana penggunaan flag ini secara berlebihan sebaiknya dihindari.

• Menimpa Nilai Secara Tidak Sengaja Ketika menggunakan flag !global, variabel dengan nama yang sama dapat secara tidak sengaja ditimpa di tempat lain. Oleh karena itu, penamaan variabel yang konsisten dan jelas sangat diperlukan.

Contoh Praktis

Berikut ini adalah contoh penggunaan flag !global dengan benar.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• Dalam kode ini, mixin set-theme dapat digunakan untuk mengganti tema secara dinamis. Karena variabel global diperbarui untuk setiap tema, beberapa tema dapat dikelola dengan fleksibel.

Output CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

Kesalahan Umum dan Tindakan Pencegahan

Lupa Menambahkan Flag

Jika Anda lupa menambahkan !global, variabel mungkin tidak diperbarui di cakupan yang dimaksudkan. Pastikan untuk menambahkan flag secara eksplisit ketika diperlukan.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Ketergantungan Berlebihan pada Cakupan Global

Terlalu bergantung pada flag !global dapat membuat debug dan pemeliharaan kode menjadi sulit. Penggunaannya sebaiknya seminimal mungkin.

Ringkasan

Flag !global dalam SASS sangat berguna dalam situasi tertentu, tetapi sebaiknya digunakan dengan hati-hati. Dengan memahami cakupan variabel secara jelas dan mengelola cakupan global dengan baik, Anda dapat membuat kode SASS yang mudah dipelihara.

Berikut adalah poin-poin penting yang perlu diingat:.

1. Secara default, variabel bergantung pada cakupan (scope)-nya.

2. Flag !global memungkinkan Anda memperbarui variabel di cakupan global.

3. Gunakan flag seminimal mungkin dan hindari penimpaan yang tidak diinginkan sebisa mungkin.

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

YouTube Video