SCSS Interpolation Fails for Assigning a Percentage to Width

Question

I'm generating several column classes with widths defined in a Sass map like so:

$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;

@each $width in $column-widths {
  .column-#{$width} {
    width: #{$width}%;
  }
}

However, I get this error on compilation:

Error in plugin 'sass'
Message:
    grid.scss
Error: Invalid CSS after "...dth: #{$width}%": expected expression (e.g. 1px, bold), was ";"
        on line 10 of grid.scss
>>       width: #{$width}%;
   ----------------------^

It looks like it's not interpreting this the way I expected. I wanted to interpolate the number values before the percent sign. But I think it's reading them as string and then trying to evaluate the percentage and just getting confused.

Answer 1

Figured out the correct way to do this. Instead of interpolation, I should use the percentage function in Sass.

$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;

@each $width in $column-widths {
  .column-#{$width} {
    width: percentage($width / 100);
  }
}