Sass lists
/*
Access individual element in a list
*/
$horse-types: pony horse mini-horse maxi-pony;
nth($horse-types, 1); //pony
nth($horse-types, -1); //maxi-pony
/*
Access list elements with @for loop:
*/
$horse-types: pony horse mini-horse maxi-pony;
@for $i from 1 through length($horse-types) {
.horses-#{$i} {
&:after {
content: "#{$i}. #{nth($horse-types, $i)}";
}
}
}
/*
Access list elements with @each loop:
*/
@each $item in $horse-types {
.hrs-photo-#{$item} {
background: image-url("img/horses/#{$item}.png") no-repeat;
}
}
/*
Accessing nested lists
*/
$horses: pony #996633,
horse Pink,
mini-horse #333,
maxi-pony #cc9849
@each $horse in $horses { //acces the first level
.horses--#{hth($horse, 1)} { //acces the second level
background-color: url('#{nth($horse, 2)}'); //second level node 2, the color
background-image: url('img/horse-types/#{nth($horse, 1)}.png') no-repeat; //second level node 1, the name
}
}