Percentages with Sass

Last night I discovered a little Sass trick that until now, I wasn’t aware of — working out percentages. Well, I knew it could be done but I assumed it required a complicated mixin or something like that.

So, here is how to simply work out a percentage using Sass:

1
2
3
.content {
  width: percentage( 580 / 940 );
}

Which compiles to:

1
2
3
.content {
  width: 61.70213%;
}

Essentially, all you have to do is pass the target (your desired width) as the first argument and the context (the containers width) as the second and you’re golden.