[HTML|JS|CSS] Sass : Nth function

Obok list, możemy definiować kolekcje dowolnych elementów, przypominające krotki. Budowanie selektorów w ten sposób, to kolejna okazja do zmniejszenia ilości kodu, jaki musi napisać programista. Funkcja nth wyciąga n-ty element z kolekcji.

Przykładowy sposób użycia funkcji nth

@each $item in (
 myclass1 red 100,
 myclass2 black 200,
 myclass3 blue 300
 )
{
 .#{nth($item,1)}
 {
  background: nth($item,2);
  min-width: nth($item,3);
 }
}

Należy pamiętać o tym, że przecinkiem oddziela się tylko elementy w kolekcji,  a do oddzielenia ich właściwości służy spacja,

Po transformacji:

.myclass1 {
  background: red;
  min-width: 100; }

.myclass2 {
  background: black;
  min-width: 200; }

.myclass3 {
  background: blue;
  min-width: 300; }