CSS的变量类名

Question

What I want is pretty simple:

I want to be able to use classnames like: class-5, class-8, etc.

In the css(scss), a variable should be able to pick up the numbers:

.class-x{
    font-size: rem-calc(x);
}

Is something like this at all possible(because that would be awesome)?

Answer 1

I's possible if you have a limited number of x :

@for $i from 1 through 10 {
  .class-#{$i} {
    font-size: rem-calc($i);
  }
}

Answer 2

You could use a sass array of numbers you want to use, then loop through to build up the output for each index;

$numbers: 3, 5, 8, 9, 12, 15;
@each $i in $numbers {
  .class-#{$i} {
    font-size: rem-calc($i);
  }
}

DEMO