如何使用 SASS 将数字转换为百分比？ [复制]

Posted 2023-03-06

【中文标题】如何使用 SASS 将数字转换为百分比？ [复制]

【英文标题】：How to convert a number to a percentage with SASS? [duplicate]

【发布时间】：2013-09-01 05:15:36

【问题描述】：

我有一张 930 像素 x 530 像素的地图。我想使用 mixin 将纬度/经度坐标转换为框内的顶部/左侧百分比值。

这就是我目前所拥有的......

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

我是这样用的……

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

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

【参考方案1】：

您想使用乘法来应用单位，而不是串联：

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

【参考方案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));