SASS error when using % in property value together with for loop variable

Question

I'm trying to write some SASS (.scss) to generate CSS for a donation barometer (think progress bar).

The CSS i need looks something like this:

.p-0:after {
    left: 0%;
}

.p-1:after {
    left: 1%;
}

[... up to 100]

The SASS I have is this:

@for $i from 0 through 100 {
    .p-#{$i}:after {left: #{$i}%;}
}

Which gives me this error:

Syntax error: Invalid CSS after "...r {left: #{$i}%": expected expression (e.g. 1px, bold), was ";}"

The weird thing is that if I replace "%" in the above SASS with "px" SASS is totally cool with it, but it's not what I need.

Maybe this is super obvious, but I'm pretty new to this SASS thing.

score 0 · Accepted Answer · answered May 28 '12 at 16:41

0

It looks weird but try to multiply the value by 1%:

@for $i from 0 through 100 {
  .p-#{$i}:after {left: #{$i*1%};}
}

answered May 28 '12 at 16:41

Mik

Better to do math outside of interpolation. Easier to read and less chance of operations going awry. For example what if the `%` gets interpreted by ruby as [modulo](http://www.ruby-doc.org/core-1.9.3/Numeric.html#method-i-25)? `#{$1} * 1%` – maxbeatty May 29 '12 at 03:50
@maxbeatty, thank you for your comment. I also thought about this way, but in this case compiled css looks like: `.p-3:after {left: 3 * 1%; }` – Mik May 29 '12 at 05:29
Thanks @MikhailD, #{$i*1%} works, but is there a good reason why px works but not %? – Eratox May 29 '12 at 16:06
@Eratox, you are welcome. To be honest, I'm not well know SASS to answer this question. I can only assume, based on "SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can" from http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#number_operations. So % is a operator, and it can not be just added in some cases. However, I did not understand, why not use something like: `\%` – Mik May 29 '12 at 17:31

1 Answers1