0

I'm trying to make a loop in SASS that generates scaffolding classes much like Foundation.

I tried this:

$colCount: 12;

$i: $colCount;
@while $i > 0 {
    $result : ($i *100) /$colCount;
  .container-#{$i}_#{$colCount} { width: $result%  ; }
  $i: $i - 1;
}

and expected somethig like this

.container-12_12 {
  width: 100%;
}

.container-11_12 {
  width: 91.6667%;
}

but this failed. When removing the '%' it worked out fine, except for the fact that the css is useless.

1 Answers1

0

Here's the solution:

.container-#{$i}_#{$colCount} { width: #{$result*1%}  ; }

multiply the variable by 1%.

I found the solution in this thread.

Community
  • 1
  • 1