Creating font sizes with this SASS function - Error

HTML & CSS
1

Hi there,

I am trying to create some font size classes and trying this code, but I am getting an error:

@function generate-font-sizes($start, $end) {
  @for $i from $start to $end {
    $class-name: unquote(".fs-#{$i}");
    #{$class-name} {
      font-size: #{$i}px;
    }
  }
}

@include generate-font-sizes(1, 200);

This is the error:
Error: Functions can only contain variable declarations and control directives.

and this is the line it refers to:
#{$class-name} {

Any ideas what is wrong with this?

I’ve read that I can escape it, but that didn’t work either.

2

Well functions can only contain variable declarations and control directives, and #{$class-name} { is neither of those.

Why’s this in a function?

Also, isnt this SCSS? I dont remember SASS having all those curly braces.

1 Like
3

I think it needs to be outside of the function. In SCSS it would look like this.

(To be honest I never use scss or Sass other than for demos with hundreds of divs so I may be wide of the mark. :slight_smile: )

1 Like
4

though i would never make a font size 200. :stuck_out_tongue:

1 Like
5

I’m baffled as to the reason for wanting 200 classes, each selecting a font size in pixels from 1px to 200px. Maybe I just don’t have the css creativity to imagine the need.

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.