Dynamyc SCSS classes with % value

Hello, I'm replacing a deprecated Angular library and I'm trying to create a class in this way:

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value}%;
    max-width: #{$value}%;
  }
}

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value}%;
    max-width: #{$value}%;
  }
}

But it gives me error: term expectedscss(css-termexpected). So I also tried:

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value + "%"};
    max-width: #{$value + "%"};
  }
}

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value + "%"};
    max-width: #{$value + "%"};
  }
}

But it doesn't seem to apply any class. What am I doing wrong?

8 Replies

MC23OP•3w ago

Also tried:

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value}#{"%"};
    max-width: #{$value}#{"%"};
  }
}

$fxflexValues: (19, 100);
@each $value in $fxflexValues {
  .flex--fx#{$value} {
    flex: 1 1 #{$value}#{"%"};
    max-width: #{$value}#{"%"};
  }
}

With the same result of solution #2: no class is applied on elements with class="flex--fx-19" Ok I solved it, but I'd still like to know what the best syntax is (I was missing a - that's why it didn't work)

ἔρως•3w ago

why dont you multiply by 1%? #{$value * 1%} that's the best way i found to convert an unitless number to an unit

MC23OP•3w ago

Ohh I wasn't aware of this trick, neat

ἔρως•3w ago

it's just plain maths by the way, you should be able to also do + 0%, - 0% or (in old versions) / 1% but the * 1% is the most obvious of them all

MC23OP•3w ago

Yeah I like it

ἔρως•3w ago

and if has type checking: if you try to do something dummy like 5px * 1%, it will yell at you

MC23OP•3w ago

I see, I replaced it in my code :)

ἔρως•3w ago

awesome!

Gaming

Programming

Dynamyc SCSS classes with % value

Did you find this page helpful?