How to convert a number to a percentage with SASS?

Question

This question already has an answer here:

• Calculate a percent with SCSS/SASS 2 answers

I have a map that is 930px x 530px. I want to use a mixin to convert the lat/long coords to top/left percentage values inside the box.

This is what i have so far...

@mixin latLong ($lat, $long) {
    left: (($long + 180) * (930/360)) + %;
    top: (($lat + 90) * (530/180)) + %;
}

I use it like this...

&.m1 {@include latLong(-33.94628333, 151.2157139);}

This is spitting out a value, but it's in quotes, so it's invalid to css. What am I doing wrong? Thanks.

Answer 1

You want to use multiplication to apply a unit, rather than concatenation:

@mixin latLong ($lat, $long) {
  left: (($long + 180) * (930/360)) * 1%;
  top: (($lat + 90) * (530/180)) * 1%;
}

Answer 2

Try using the native SASS helper method for percentages: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#percentage-instance_method.

@mixin latLong ($lat, $long) {
    left: percentage(($long + 180) * (930/360));
    top: percentage(($lat + 90) * (530/180));
}