SASS for function for text font-weight with steps

0
votes

I want to iterate font-weight - 100, 200, 300, 400, 500, 600, 700, 800 and 900

This is the function I'm using 

   @for $i from 100 through 900 {
    .font-weight-#{$i} {
       font-weight: 0 + ($i * 1);
      }
    }

problem is, it's integrating from 100, 101, 102 to all the way to 900. How can I make this function more performant? How to output only 100, 200, 300, 400, 500, 600, 700, 800 and 900 values

1
csssasscss-selectors

1 Answers

1
votes

Easiest solution is to iterate from 1 through 9 and multiply it by 100.

@for $i from 1 through 9 {
   .font-weight-#{$i * 100} {
      font-weight: ($i * 100);
   }
}