创建@for或@each以使用scss自动化样式

Question

The output I am trying to achieve is

.gray-1 {
  height: 10px;
}
.gray-2 {
  height: 20px;
}
.gray-3 {
  height: 30px;
}
.gray-4 {
  height: 40px;
}
.gray-5 {
  height: 50px;
}
.gray-6 {
  height: 60px;
}
.gray-7 {
  height: 70px;
}
.gray-8 {
  height: 80px;
}
.gray-9 {
  height: 90px;
}
.red-1 {
  height: 10px;
}
this will end at 9 and then .blue-1 ++ will start
etc....

below is the current each scss function i am playing with but it outputs

.gray red blue-1 {
  height: 10px;
}

Can i make it pass by gray 1-9 and then red 1-9 then finally blue 1-9. also is it necessary to do the height list? can I just do n+10 up to 90 in someway?

$height-list: 10 20 30 40 50 60 70 80 90;
$color-var: gray red blue;

@each $current-color in $height-list {
    $i: index($height-list, $current-color);
  .#{$color-var}-#{$i} { 
        height: #{$current-color}px;
    }
}

codepen

Answer 1

This option works perfect. all you need to do is use two loops for your two multi vars.

scss:

$height-list: 10, 20, 30, 40, 50, 60, 70, 80, 90;
$color-var: gray, red, blue;

    @for $c from 1 through length($color-var) {
      @for $h from 1 through length($height-list) {
        .#{nth($color-var, $c)}-#{$h} {
          height: nth($height-list, $h) + px;
        }
      }
    }

css output:

.gray-1 {
  height: 10px; }

.gray-2 {
  height: 20px; }

.gray-3 {
  height: 30px; }

.gray-4 {
  height: 40px; }

.gray-5 {
  height: 50px; }

.gray-6 {
  height: 60px; }

.gray-7 {
  height: 70px; }

.gray-8 {
  height: 80px; }

.gray-9 {
  height: 90px; }

.red-1 {
  height: 10px; }

.red-2 {
  height: 20px; }

.red-3 {
  height: 30px; }

.red-4 {
  height: 40px; }

.red-5 {
  height: 50px; }

.red-6 {
  height: 60px; }

.red-7 {
  height: 70px; }

.red-8 {
  height: 80px; }

.red-9 {
  height: 90px; }

.blue-1 {
  height: 10px; }

.blue-2 {
  height: 20px; }

.blue-3 {
  height: 30px; }

.blue-4 {
  height: 40px; }

.blue-5 {
  height: 50px; }

.blue-6 {
  height: 60px; }

.blue-7 {
  height: 70px; }

.blue-8 {
  height: 80px; }

.blue-9 {
  height: 90px; }

/*# sourceMappingURL=style.css.map */

Answer 2

Here is my solution to this

$height-list: 10 20 30 40 50 60 70 80 90;
$gray-color:gray;
$red-color:red;
$blue-color:blue;
@each $current-color in $height-list {
    $i: index($height-list, $current-color);

  .#{$gray-color}-#{$i} { 
        height: #{$current-color}px;
    }
 .#{$red-color}-#{$i} { 
        height: #{$current-color}px;
    }
.#{$blue-color}-#{$i} { 
        height: #{$current-color}px;
    }
}

Hope this helps

You can also do to avoid having multiple variables as this check this

$height-list: 10 20 30 40 50 60 70 80 90;
$colors: gray,red,blue;
@each $current-color in $colors{
  $color:index($colors,$current-color);
  @each $current-height in $height-list {
      $i: index($height-list, $current-height);
   .#{$current-color}-#{$i} { 
        height: #{$current-color}px;
    }
  }
}

Answer 3

If you've got two arrays, you probably need two @each loops.

$height-list: 10 20 30 40 50 60 70 80 90;
$color-var: gray red blue;

@each $color in $color-var{
  @each $height in $height-list{
    $i: index($height-list, $height)
    .#{$color-var}-#{$i} {
      height: #{$height}px;  
    }
  }
}