如何使用SASS将数字转换为百分比？

Question

我有一张930px x 530px的地图.我想使用mixin将lat/long coords转换为框内的顶部/左侧百分比值.

这就是我到目前为止......

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

我这样用它......

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

这是吐出一个值,但是它在引号中,所以它对css无效.我究竟做错了什么？谢谢.

Answer 1

您希望使用乘法来应用单位,而不是连接:

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

Answer 2

尝试使用原生SASS帮助程序方法获取百分比: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));
}