Mga Listahan sa SASS

Ipinaliwanag ng artikulong ito ang mga listahan sa SASS.

Tatalakayin natin ang mga pangunahing kaalaman at mas advanced na gamit ng mga listahan sa SASS at magbibigay ng mga praktikal na halimbawa.

YouTube Video

Mga Listahan sa SASS

Ang SASS ay nag-aalok ng mga kapaki-pakinabang na katangian na parang programming bilang karagdagan sa CSS. Sa mga ito, ang mga listahan ay isang napakahalagang katangian kapag nagde-define ng mga estilo nang dinamiko.

Ano ang isang Listahan sa SASS?

Ang isang listahan sa SASS ay isang koleksyon ng mga halaga na pinaghiwalay ng kuwit (,) o espasyo. Ginagamit ito kapag nagpapasa ng maramihang mga halaga sa mga katangian ng CSS o nagsasagawa ng mga pag-uulit.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Kasama sa pangunahing katangian ng mga listahan ang mga sumusunod na puntos:.

• Maaaring naglalaman ang isang listahan ng mga halaga ng kahit anong uri ng datos, gaya ng mga numero, string, o kulay.
• Maaari kang pumili sa pagitan ng kuwit na naghihiwalay at espasyo na naghihiwalay na mga listahan depende sa gamit.

Pangunahing Halimbawa ng Pagde-define ng Estilo Gamit ang Mga Listahan

Nasa ibaba ang isang halimbawa ng awtomatikong paglikha ng mga simpleng istilo ng border gamit ang mga listahan.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Lalabas ng Pag-compile

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

• Sa pamamagitan ng nth() function ng sass:list module, maaari kang kumuha ng isang partikular na halaga mula sa isang listahan.

Pag-manipula ng Listahan

Ang sass:list module ay nagbibigay ng mga function para sa pag-manipula ng mga listahan, kaya madaling makuha at magdagdag ng mga elemento..

Kunin ang Isang Elemento: nth()

nth() ay isang function na kumukuha ng isang elemento mula sa isang listahan.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• Sa kodigong ito, ginagamit ang nth() na function upang makuha ang halaga sa tinukoy na index.

Suriin ang Index: index()

Ang index() ay isang function na nagbabalik ng posisyon ng isang elemento sa listahan.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• Sa code na ito, ginagamit ang index() upang makuha na ang elementong blue ay ang ikatlong item sa listahan.

Kunin ang Haba ng Listahan: length()

length() ay isang function na nagbabalik ng haba ng isang listahan.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• Sa kodigong ito, ginagamit ang length() na function upang makuha ang bilang ng mga halaga sa listahan.

Magdagdag ng Elemento: append()

append() ay isang function na ginagamit upang magdagdag ng mga elemento sa isang listahan.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• Sa kodigong ito, ginagamit ang append() na function upang magdagdag ng isang halaga sa listahan.

Palitan ang Elemento: set-nth()

Ang set-nth() ay isang function na nagpapalit ng elemento sa tinukoy na posisyon ng panibagong halaga.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• Sa code na ito, ginagamit ang set-nth() upang palitan ang pangalawang elemento ng yellow.

Pagsamahin ang mga Listahan: join()

Ang join() ay isang function na pinagsasama ang dalawang listahan.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• Sa code na ito, ginagamit ang join() upang pagsamahin ang dalawang listahan sa isa.

Itambal ang mga Listahan: zip()

Ang zip() ay isang function na nagtatambal ng mga elemento ng ilang listahan ayon sa pagkakasunod-sunod.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• Sa code na ito, ginagamit ang zip() upang pagsamahin ang mga pangalan at edad bilang mga pares.

Nakakagulong mga Listahan

Maaari ring gumulong ang mga listahan, na nagpapahintulot na magamit ang mga ito na parang two-dimensional na mga array.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• Sa pamamagitan ng paghawak ng ganitong klase ng kumplikadong mga istruktura ng datos, nagiging posible ang mas advanced na pagbuo ng estilo.

Praktikal na Halimbawa: Paggawa ng Gradients

Narito ang isang halimbawa ng mabisang paggawa ng gradients gamit ang mga listahan.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Lalabas ng Pag-compile

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• Ang kodigong ito ay isang halimbawa ng awtomatikong paggawa ng gradients gamit ang mga listahan sa SCSS.

  • Ang mga kulay na ginagamit para sa gradient ay tinukoy sa $colors na listahan.
  • Sa gradient() na function, kinakalkula ang isang posisyon at pantay na inilalapat sa bawat kulay batay sa dami ng mga kulay, na lumilikha ng listahan para sa gradient.
  • Sa klase na .background, ginagamit ang linear-gradient upang pagsamahin ang nalikhang listahan ng kulay at mag-aplay ng pahalang na gradient.

• Dahil ang mga posisyon ay awtomatikong kinakalkula alinsunod sa haba ng listahan ng kulay, madali kang makakagawa ng pantay na gradient sa pamamagitan ng pagdaragdag o pagpapalit ng mga kulay.

Mga Palatandaan at Pinakamahusay na Kasanayan

Maaaring isaalang-alang ang mga sumusunod na punto kapag ginagamit ang mga listahan:.

• Uri ng Separator ng Listahan Ang mga listahan na hinihiwalay ng kuwit at ng espasyo ay iba ang pagtrato, kaya kailangan mong pumili nang naaayon sa sitwasyon.

• Laki ng Listahan Kapag nagmamanipula ng mga listahan nang dinamiko, ligtas na i-check ang laki gamit ang length() na function.

• Pamahala sa Mga Nakakagulong na Listahan Kapag naghahawak ng nakakagulong na mga listahan, ang maingat na operasyon sa index ay makakatulong na maiwasan ang mga error.

Konklusyon

Ang mga listahan sa SASS ay isang makapangyarihang kasangkapan para sa dinamiko na pagde-define ng mga estilo at epektibong pangangasiwa sa kumplikadong mga disenyo.

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