Iterasyon sa SASS

Ipinaliliwanag ng artikulong ito kung paano gamitin ang iterasyon sa SASS.

Ipapaliwanag namin kung paano gawin ang iterasyon sa SASS, hakbang-hakbang, gamit ang mga totoong halimbawa ng code.

YouTube Video

Iterasyon sa SASS

Ang iterasyon sa SASS ay tumutulong upang maiwasan ang pag-uulit ng code at nagbibigay-daan sa iyo na lumikha ng mga flexible at reusable na style.

Mga dahilan kung bakit ginagamit ang iterasyon sa SASS

May ilang benepisyo ang paggamit ng iterasyon, tulad ng mga sumusunod:.

• Tumataas ang reusability ng code, kaya mas madaling bumuo ng magkakaparehong estilo ng pattern.
• Napapadali ang pagpapanatili (maintainability) ng code kaya mas madali ang pagbago ng style ng sabay-sabay.
• Nakakatulong din ito na mabawasan ang mga error.

Halimbawa, maaari kang lumikha ng mga style para sa mga button na may iba't ibang kulay o mga component na may maraming laki nang sabay-sabay.

Sintaks na ginagamit para sa iterasyon sa SASS

Ang pangunahing sintaks na ginagamit para sa iterasyon sa SASS ay ang mga sumusunod:.

• Gamit ang @for, maaari kang magsagawa ng iterasyon mula sa isang tinukoy na hanay ng mga numero.
• Gamit ang @each, maaari kang mag-loop sa mga list o map habang nag-i-iterasyon.
• Gamit ang @while, maaari kang mag-loop hangga't hindi natutugunan ang isang kundisyon.

Iterasyon gamit ang @for

Ang @for ay nagsasagawa ng paulit-ulit na proseso batay sa itinakdang hanay ng mga numero.

Sintaks

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/

• Itakda ang panimulang halaga at dulong halaga para sa <start> at <end>. Ang paggamit ng to ay hindi kasama ang end value, samantalang ang through ay isinasama ito.

Halimbawa

Ang sumusunod na code ay awtomatikong lumilikha ng mga klase na may unti-unting tumataas na border width ng 1px bawat isa.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}

• Ang code na ito ay awtomatikong lumilikha ng mga klase na ang kapal ng border ay tumataas ng 1px sa bawat isa. Ginagamit dito ang @for directive para mag-loop mula 1 hanggang 5.

Nabuong CSS

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}

• Ang mga klase mula .border-1 hanggang .border-5 ay mabubuo nang sunod-sunod, na ang bawat border ay tumataas ng 1px sa kapal.

Iterasyon gamit ang @each

Gumagamit ang @each ng loop gamit ang mga list o map. Kapaki-pakinabang ito kapag nais mong mabilis na gumawa ng patterned na mga klase.

Sintaks

1/*
2@each $item in <list> {
3  ...
4}
5*/

Halimbawa 1: Paggamit ng List

Ang sumusunod na code ay lumilikha ng maraming klase para sa text color.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}

• Ang code na ito ay awtomatikong lumilikha ng klase ng kulay ng text para sa bawat kulay sa listahan. Ginagamit ang @each directive upang iproseso ang bawat halaga sa listahan nang sunod-sunod.

Nabuong CSS

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}

• Kapag kinompile ang SASS file sa CSS, lumilikha ito ng mga klase tulad ng .text-red, .text-blue, at .text-green para sa bawat kulay sa listahan.

Halimbawa 2: Paggamit ng Map

Sa paggamit ng map, maaari mong hawakan ang mga pares ng key at value. Sa sumusunod na halimbawa, ang mga background color ng button ay tinutukoy gamit ang map.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Nabuong CSS

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}

• Kapag kinompile ang SASS file sa CSS, nabubuo ang mga klase tulad ng .bg-primary, .bg-success, at .bg-danger para sa bawat key sa map.

Iterasyon gamit ang @while

Ang @while ay nagpapatuloy ng loop hangga't ang kondisyon ay totoo.

Sintaks

1/*
2@while <condition> {
3  ...
4}
5*/

Halimbawa

Halimbawa, kung nais mong dagdagan ang font size sa bawat hakbang, maaari mo itong isulat ng ganito:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}

• Maaari mong gamitin ang @while directive para sa iteratibong proseso kapag dinadagdagan ang laki ng font nang paunti-unti. Sa paggamit ng variable na $i, awtomatikong nabubuo ang mga klase para sa halaga mula 1 hanggang 5.

Nabuong CSS

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}

• Kapag kinompile ang SASS file sa CSS, ang mga klase na may font size na tumataas mula 1rem hanggang 5rem ay awtomatikong nabubuo.

Advanced na Halimbawa: Pinagsasama ang Iterasyon at Nesting

Sa pinagsamang iterasyon at nesting ng SASS, posible ang mas advanced na pagbuo ng mga style.

Halimbawa

Narito sa ibaba ang halimbawa kung saan sabay na tinutukoy ang background at hover color para sa mga button.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}

• Sa pamamagitan ng pagsasama ng iteration at SASS nesting, maaari kang lumikha ng mga kulay ng background at hover ng mga button nang sabay-sabay. Para sa bawat kulay sa mapa, isang .btn- na klase ang ginagawa at ang istilong :hover ay tinutukoy gamit ang nesting.

Nabuong CSS

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}

• Kapag kino-convert mo ang SASS file sa CSS, ang background color at hover color ng bawat button ay awtomatikong nalilikha, at ang mga :hover na estilo ay sabay-sabay na nade-define gamit ang nesting.

Mga Dapat Tandaan sa Paggamit ng Iterasyon

Isaalang-alang ang mga sumusunod na punto kapag gumagamit ng iterasyon upang makagawa ng mas epektibo at madaling maintindihang code.

1. Iwasan ang labis na malalim na nesting Ang labis na nesting ay nagpapababa sa readability, kaya panatilihin ito sa pinakamababa na kinakailangan.

2. Isaalang-alang ang epekto sa performance Kung masyadong maraming klase ang nabubuo dahil sa iterasyon, maaaring lumaki nang hindi kailangan ang iyong CSS.

3. Gumamit ng akmang mga pangalan ng variable Para sa mga variable tulad ng $i o $item, gumamit ng makahulugang pangalan upang mas madaling maintindihan ang iyong code.

Buod

Ang paggamit ng iterasyon sa SASS ay nagbibigay-daan sa episyente at madaling panatilihing disenyo ng style. Lalo na, ang pagpili sa pagitan ng @for, @each, at @while ay nagbibigay-daan sa iyo na gumawa ng dynamic at flexible na CSS.

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