Mga Variable ng SASS

Ipinaliliwanag ng artikulong ito ang mga variable ng SASS.

Magbibigay kami ng detalyadong paliwanag tungkol sa mga variable ng SASS at pag-aaralan natin ang aktuwal na paggamit nito hakbang-hakbang.

YouTube Video

Mga Variable ng SASS

Ang SASS ay isang extension ng lengguwahe ng CSS na nagbibigay-daan upang makapagsulat ng CSS nang mas flexible at mas episyente. Isa sa mga tampok nito, ang mga variable ay isang makapangyarihang kasangkapan para mapanatili ang consistency ng estilo at mas mapadali ang pagbabago.

Ano ang mga Variable ng SASS?

Nagbibigay ang mga variable ng SASS ng paraan upang i-store ang mga halaga tulad ng kulay, laki ng font, at espasyo na madalas gamitin sa CSS, kaya't maaari itong pamahalaan sa iisang lugar.

Sa pamamagitan ng paggamit ng mga variable, madali mong mababago ang mga estilo at mapapabuti ang pagkaunawa sa code.

Paano Isulat ang Mga Baryabol

Maaaring isulat ang mga baryabol sa mga sumusunod na paraan.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Kailangan lagyan ng $ symbol sa unahan ng pangalan ng variable.
• Ang variable-name ay ang pangalan ng variable. Inirerekomenda na bigyan ito ng malinaw at masusing pangalan.
• Ang value ay ang halagang itinatalaga sa variable.

Pangunahing Paggamit ng Mga Variable

Narito ang isang pangunahing halimbawa ng variable ng SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Kapag nagtakda ka ng variable kagaya ng $primary-color, maaari mo itong magamit muli nang paulit-ulit.
• Kung babaguhin ang halaga, kailangan mo lamang baguhin ang pagpapakahulugan ng variable, at mapapadali ang pagpapanatili.

Nabuong CSS Output

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Paggamit ng Mga Variable sa Loob ng Nesting

Ang pagsasama ng nesting ng SASS at mga variable ay tumutulong upang maging organisado ang iyong code at maging mas madaling pamahalaan.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Maaari mong gamitin ang mga variable sa loob ng nested selectors.
• Sa pamamagitan ng pagsasama-sama ng mga variable, maaari kang makamit ang flexible na estilo, tulad ng pagpapadilim ng kulay ng 10% gamit ang color.adjust na function.

Nabuong CSS Output

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Mga Variable na may Default na Halaga

Sa SASS, maaari kang magtakda ng default na halaga para sa mga variable. Ang pagtatakda ng default na halaga ay nagbibigay-daan na gamitin ang mga variable nang hindi natatabunan ang mga dati nang nakatakda.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Sa pagdagdag ng !default, hindi matatabunan ang variable kung ito ay nakatakda na.
• Ito ay kapaki-pakinabang sa team development o sa mga setting ng buong proyekto.

Nabuong CSS Output

1p {
2    font-size: 16px;
3}

Saklaw ng Variable

Ang mga variable ng SASS ay may saklaw, at ang kanilang pagiging available ay depende kung saan ito itinakda. Ang pag-unawa sa saklaw ay nakakatulong na maiwasan ang di-sinasadyang pagtatabunan ng mga variable.

1. Global na Saklaw

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Ang mga variable sa global na saklaw ay magagamit sa buong file.

2. Lokal na Saklaw

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Ang mga variable sa lokal na saklaw ay magagamit lamang sa partikular na nesting o file.

Paggamit ng Mga Variable sa Pagkalkula

Maaaring gamitin ang mga variable ng SASS sa mga pagkalkula. Ang mga pagkalkula ay maaaring gawin para sa mga halaga na may unit at pati na rin sa mga kulay.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Nabuong CSS Output

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Ang paggamit ng mga variable para sa pag-adjust ng kulay o pagkalkula ng espasyo ay nagpapabuti sa pagpapanatili.

Buod

Ang mga variable ng SASS ay mahalagang tampok para sa episyenteng pamamahala at pagpapanatili ng CSS.

Ang paggamit ng mga variable ng SASS ay tumutulong para mapanatili ang consistent na mga estilo sa buong proyekto at mapadali ang pagbabago.

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