我正在尝试在 SASS 中执行以下语句:
($value * $ratio) + "em";
我试图让它编译成这样的结果,16em
但我得到了"16em"
似乎有一个强制函数 coerce(num_units, den_units)
,但我不理解文档,它没有提供任何示例,当我尝试编译它时,它只是将函数作为字符串吐出。
谁能告诉我如何让这个功能工作?
您提供了指向 SASS 源代码文档的链接,该文档使用 Ruby 编写。
该coerce
函数是一个内部函数,实际上应该作为一种方法应用于数字,例如some_number.coerce(...)
。
此功能不适用于 SASS。
有关 SASS 中可用的函数列表,请参阅此页面:http ://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
没有现有的 SASS 函数来操作单位,因此您必须创建自己的:
@function strip-units($value)
@if unitless($value)
@return $value
@else
@return $value / ($value * 0 + 1)
@function add-unit($value, $new-unit)
@return $value + 0#{$new-unit}
@function change-units($value, $new-unit)
@return add-unit(strip-units($value), $new-unit)
$pxs-in-em: 16
@function pxtoem($px-value)
@return change-units($px-value / $pxs-in-em, em)
@function emtopx($em-value)
@return change-units($em-value * $pxs-in-em, px)
// Removing "px" from 1px
@warn "strip-units(1px)", strip-units(1px) // => 1
// Adding "px" to 1
@warn "add-unit(1, px)", add-unit(1, px) // => 1px
// Changing 1px to 1em
@warn "change-units(1px, em)", change-units(1px, em) // => 1em
// Converting 16px to 1em
@warn "pxtoem(16px)", pxtoem(16px) // => 1em
// Converting 1em to 16px
@warn "emtopx(1em)", emtopx(1em) // => 16px