Ang `!global` na Flag sa SASS

Ipinaliliwanag ng artikulong ito ang !global na flag sa SASS.

Ipapaliwanag namin ang detalyadong mekanismo, mga halimbawa ng paggamit, at mga pag-iingat sa !global na flag.

YouTube Video

Ang !global na Flag sa SASS

Sa SASS, ginagamit ang !global na flag upang pamahalaan ang saklaw (scope) ng mga variable. Sa wastong pag-unawa at paggamit ng flag na ito, maiiwasan ang hindi inaasahang asal ng iyong code at mapapabuti ang pagpapanatili nito.

Ano ang !global na Flag?

Karaniwan, ang mga variable sa SASS ay may sariling saklaw (scope). Sa default, ang mga variable ay gumagana lamang sa loob ng kanilang sariling saklaw kung saan sila itinakda. Sa madaling salita, kung ang variable ay itinakda sa loob ng isang function o mixin, hindi ito magagamit sa labas ng saklaw na iyon.

Ngunit, sa paggamit ng !global na flag, maaari mong direktang ilagay ang variable sa pandaigdigang saklaw (global scope). Pinapayagan nitong magamit ang variable sa iba’t ibang scope.

Kung Walang !global na Flag

 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}

• Sa code na ito, ang $color ay itinakda sa global scope kaya ang color na katangian ng .change ay nananatiling red.

Inilabas na CSS

1.change {
2    color: red;
3}

Gamit ang !global na Flag

Lagyan natin ng !global na flag ang parehong halimbawa.

 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}

• Sa kasong ito, dahil tinukoy ang !global na flag, ang halaga ng $color ay na-update sa global scope. Dahil dito, ang color na property ng .change ay nagiging blue.

Inilabas na CSS

1.change {
2    color: blue;
3}

Mga Paalala sa Paggamit

• Pagdumi ng Pandaigdigang Saklaw (Global Scope Pollution) Ang sobrang paggamit ng !global na flag ay maaaring magdulot ng hindi inaasahang conflict sa scope at pagdumi ng global scope. Ito ay lalo na mahalaga sa malalaking proyekto, kung saan dapat iwasan ang labis na paggamit ng flag na ito.

• Hindi Sinasadyang Pag-overwrite ng Halaga Kapag ginagamit ang !global na flag, ang mga variable na may parehong pangalan ay maaaring hindi sinasadyang ma-overwrite sa ibang lugar. Kaya naman, mahalaga ang pare-pareho at malinaw na pagbibigay ng pangalan sa mga variable.

Praktikal na Halimbawa

Ang sumusunod ay isang halimbawa ng tamang paggamit ng !global na flag.

 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}

• Sa code na ito, maaaring gamitin ang set-theme na mixin para dynamic na mapalitan ang mga tema. Dahil na-a-update ang global variables para sa bawat tema, maaaring pamahalaan ng flexible ang maraming tema.

Inilabas na CSS

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

Mga Karaniwang Pagkakamali at Mga Paraan Para Maiwasan

Nakakalimutan ang Flag

Kung makalimutan mong idagdag ang !global, maaaring hindi ma-update ang variable sa nais na sakop nito. Siguraduhing idagdag ang flag kung kinakailangan.

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}

Labing-labis na Pagdepende sa Global Scope

Ang labis na pagdepende sa !global na flag ay maaaring magpahirap sa pag-debug at pagmintina ng code. Dapat limitahan ang paggamit nito hangga't maaari.

Buod

Ang !global na flag sa SASS ay napaka-kapaki-pakinabang sa mga tiyak na sitwasyon, ngunit dapat gamitin ito nang may pag-iingat. Sa pamamagitan ng malinaw na pag-unawa sa sakop ng variable at wastong pamamahala ng global scope, makakagawa ka ng SASS code na madaling ayusin at mapanatili.

Ang mga sumusunod ay mahahalagang punto na dapat tandaan:.

1. Ang mga variable ay nakadepende sa kanilang sakop bilang default.

2. Ang !global na flag ay nagbibigay-daan upang ma-update mo ang mga variable sa global scope.

3. Limitahan ang paggamit ng mga flag at iwasan ang hindi sinasadyang pag-overwrite hangga't maaari.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video