13 replies

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)

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?

13 replies

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)

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?