CODEWITHSUNDEEP
cssclassvariablessass
Luc
Luc

Reputation: 1825

variable class name for css

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)?

Upvotes: 0

Views: 1967

Answers (2)

Novocaine
Novocaine

Reputation: 4786

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

Upvotes: 0

zessx
zessx

Reputation: 68820

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

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

Upvotes: 1

Related Questions