Ang `!default` na Flag sa SASS

Ipinaliwanag ng artikulong ito ang !default na flag sa SASS.

Ipapaliwanag namin nang detalyado ang !default na flag at ipapakita kung paano ito gamitin sa mga praktikal na halimbawa.

YouTube Video

Ang !default na Flag sa SASS

Ang !default na flag sa SASS ay isang mahalagang kasangkapan upang mapabuti ang modularity at reusability ng mga stylesheet. Sa paggamit ng flag na ito, maaari kang magtakda ng default na halaga para sa mga variable ngunit magbibigay-daan pa rin sa ibang naitakdang halaga na manaig. Dito, ipapaliwanag natin nang detalyado ang !default na flag at ipapakita kung paano ito gamitin sa pamamagitan ng mga praktikal na halimbawa.

Ang !default ay isang tampok na partikular sa SASS na ginagamit upang magtakda ng default na halaga para sa mga variable. Sa pagdagdag ng flag na ito, nakakamit ang mga sumusunod na pag-uugali:.

• Pagtatakda ng Default na Halaga Itatakda lamang ang halaga kung ang variable ay hindi pa naitakda sa ibang bahagi.

• Pagkontrol sa Pagkakasunod-sunod ng Halaga Kung ang variable ay naitakda na, hindi papalitan ang kasalukuyang halaga nito.

Ang tampok na ito ay lalong kapaki-pakinabang kapag bumubuo ng mga module at library. Maaaring magtakda ng sariling halaga ang mga gumagamit, ngunit kung wala, ang default na halaga ang gagamitin.

Batayang Halimbawa

Ipinapakita ng sumusunod na code ang batayang paggamit ng !default na flag.

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

• Pagdeklara ng default na variable na $primary-color gamit ang flag na !default.

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

• Pag-import ng mga variable gamit ang @use at pinapalitan ang $primary-color gamit ang with.

Inilabas na CSS

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

• Sa halimbawang ito, dahil ang $primary-color ay itinakda sa red sa main.scss, ang blue na naideklara sa _variables.scss ay hindi gagamitin.

Kapag Walang Halaga ang Variable

Kung hindi naitakda ang variable sa main.scss, ang default na halaga ang gagamitin.

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

• Dahil ang variable ay na-import nang hindi pinapalitan, ang default na value na blue para sa $primary-color na naideklara sa _variables.scss ang gagamitin.

Inilabas na CSS

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

Paggamit sa Mga Nakapaloob (Nested) na Module

Ang paggamit ng !default sa loob ng mga module ay nagbibigay-daan sa mas flexible na pag-customize.

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

• Pagdeklara ng $primary-color at $button-color gamit ang flag na !default.

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

• Pag-import ng variables na module at pagtukoy ng kulay ng .button gamit ang variable na $button-color.

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

• Paggamit ng @use na may with upang palitan ang $button-color ng orange, at pag gamit ng buttons na module.

Inilabas na CSS

1.button {
2    color: orange;
3}

• Sa ganitong paraan, nagbibigay ang mga module ng default na halaga habang iginagalang ang mga setting na itinakda ng gumagamit.

Mga Dapat Tandaan

Kapag gumagamit ng !default na flag, dapat isaalang-alang ang mga sumusunod:.

• Pagpili ng Angkop na Default na Halaga Dapat piliin ang default na halaga upang masaklaw ang karaniwang mga sitwasyon ng paggamit.

• Sinsadyang Disenyo Gumamit ng pare-parehong pangalan ng variable at iwasan ang conflict sa ibang modules.

• Pag-tsek ng Pagkakasunod-sunod Para gumana ng tama ang !default na flag, kailangang maayos ang pagkakasunod-sunod ng pag-override ng variable.

Mga Praktikal na Sitwasyon

Pagpapalit ng Tema

Halimbawa, kapag gumagawa ng library na sumusuporta sa mga tema, maaari mong gamitin ang !default upang magbigay ng nababago (customizable) na default na halaga.

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}

• Pagdeklara ng $background-color at $text-color gamit ang !default flag para sa tema, at paglalapat ng mga ito sa body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Pag-customize ng tema sa pamamagitan ng pagpapalit ng $background-color gamit ang @use at with.

Inilabas na CSS

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

Pwedeng Gamitin muli na Mga Component

Sa isang reusable na button component, maaari kang magbigay ng default na estilo ngunit pahihintulutan pa rin ang mga user na palitan ang kulay.

 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}

• Pagdeklara ng default na background at text na kulay para sa mga button gamit ang !default at paglalapat ng mga estilo.

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

• Pag-customize ng kulay ng button sa pamamagitan ng pagpapalit ng $button-bg gamit ang @use at with.

Inilabas na CSS

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

Buod ng !default na Flag

Ang !default na flag sa SASS ay isang makapangyarihang kasangkapan kapag bumubuo ng mga module at library. Pinapabuti nito ang pwedeng gamitin muli at nagbibigay ng flexible na pag-customize.

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