[HTML|JS|CSS] Sass : Listy

Sass umożliwia iterowanie po definiowanych przez nas kolekcjach. Możemy stworzyć listę napisów jako pewną zmienną, a następnie odwołać się do każdego z tych napisów. Znacznie ułatwia to pracę w momencie gdzie tworzymy kilka podobnych selektorów, a każdy z tych selektorów wykorzystuje jakiś napis w wielu miejscach. Kolekcję tworzymy podobnie jak zmienną, przy czym wartości podaje się w nawiasach oddzielone przecinkami. Do iterowania po takiej kolekcji wykorzystujemy polecenie @each. Polecenie to przypomina instrukcję foreach z języka C#. Odwołanie do elementu kolekcji następuje poprzez podanie #{item}.

Przykładowo, gdy chcemy stworzyć klasy, które zarówno w nazwie, jak i ścieżce do background-image ten sam ciąg znaków, możemy użyć list.

$icons:(icon1,icon2,icon3);
@each $icon in $icons
{
 .#{$icon}superclass 
 { 
  background-image: url('/images/#{$icon}.png')
 };
}

Po transformacji:

.icon1superclass {
  background-image: url("/images/icon1.png"); }

.icon2superclass {
  background-image: url("/images/icon2.png"); }

.icon3superclass {
  background-image: url("/images/icon3.png"); }