user3803699 user3803699 - 1 month ago 17
Sass (Sass) Question

Create a @for or @each to automate styles with scss

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

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