scss Sass列表

Posted 2021-05-18

/*
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
    }
}