In Sass, how can I output a % sign

Question

I'm trying to create a family of CSS selectors using a for loop:

@for $i from 1 through 3 {
  .bottom-#{$i} {
    bottom: #{$i}%;
  }
}

I want an output that looks like this:

.bottom-1 { bottom: 1%  }
.bottom-2 { bottom: 2%  }
.bottom-3 { bottom: 3%  }

But SASS doesn't like the % sign- it's trying to eval the statement. I'm assuming there is a way to escape a character like that, but I can't find it.

Any ideas?

Thanks

@cimmanon Could you show me how to get the output I indicated using the technique used in the duplicate question? It doesn't appear to be possible. — Hairgami_Master, Dec 19 '15 at 02:56

score 2 · Accepted Answer · answered Dec 18 '15 at 21:49

2

You can use the percentage() function to convert the number to a percentage and then divide it by 100:

@for $i from 1 through 3 {
  .bottom-#{$i} {
    bottom: percentage($i / 100);
  }
}

answered Dec 18 '15 at 21:49

Matthew Rapati

5,648
4
28
48

1

Thank you- I didn't realize the percentage function would actually render a '%' sign onto the string. – Hairgami_Master Dec 19 '15 at 02:59

In Sass, how can I output a % sign

1 Answers1