scss Sass循环：for，while，每个/ Sass反向循环：http：//blog.ricardofilipe.com/post/reverse-loops-with-sass

Posted 2021-05-18

$ct-series-colors: (
  red,
  blue,
  green
) !default;

@for $i from length($ct-series-colors)*-1 through -1 {
  .chart-legend > .fa-circle:nth-of-type(#{abs($i)}) {
    color: nth($ct-series-colors, $i);
  }
}

/*

For loop

@for $var from <start> through <end>
Example: print styles for eight columns, with an ascending number in the end, and a different width for each column:

*/

@for $i from 1 through 8 {
    $width: percentage(1 / $i)
    .col-#{$i} { //note that the $i is interpolated, whenever you have another character ‘touching’ the variable, or it’s between quotes, it needs to be interpolated.
        width: $width;
    }
}


//Compiles to:

/*
.col-1 {width: 100%;}
.col-2 {width: 50%;}
…
.col-8 {width: 12.5%;}
*/



/*

While loop

*/

$num: 4;

@while $num > 0 {
    .module-#{$num} {
        content: "#{$num}";
    }
    $num: $num - 1;
}


/*

Each loop

Similar to PHP foreach: takes a list and works with that, lists in Sass are basically arrays. 

*/

$list: arnold sylvester dolf jean chuck

@mixin author-imgs {
  @each $manly-man in $list
    .photo-#{$manly-man} {
        background: image-url("avatars/#{$manly-man}.png") no-repeat;
    }
}

.author-bio {
    @include author-imgs();
}