Search code examples
csssassmixinscompass

SCSS mixin, how to concatenate units? (px,%,em)

I want to define classes like

.bg-1 {
   width: 1%
}
.bg-2 {
   width: 2%
}

And I'm trying with this:

@for $i from 1 through 100 {    
  .bg-#{$i} {
    width: #{$i};
  }
}

This at least compiles, but prints out

    .bg-1 {
       width: 1;
    }
    .bg-2 {
       width: 2;
    }

the problem is that If I add:

width: #{$i}%;

I got:

error sass/screen.scss (Line 294 of sass/modules/_classes.scss: Invalid CSS after "   $var: ": expected expression (e.g. 1px, bold), was "%;")
Solution

  • Try this solution. It works.

    @for $i from 1 through 100 {    
   .bg-#{$i} {
     $percentage: unquote("%");
     width: #{$i}$percentage;
   }
}

    Or this:

     @for $i from 1 through 100 {    
  .bg-#{$i} {
    width: #{$i}unquote("%");
  }
}