我有将px转换为em的此功能:
@function em($pixels, $context: 16px) {
@return #($pixles/$context)em
}
我有使用此功能的变量:
$margin: em(60px);
现在,我试图像这样使用它:
div {
margin: 0 -#{$margin / 2};
}
但这是无效的CSS。devtools中的输出为:
margin: 0 -3.75em / 2
当我删除该函数并仅使用em值时,它就起作用了。我怎样才能做到这一点?
首先,我认为您的函数代码中有一个错字,但我忽略了这一点,因为您的函数根据您的输出可以正常工作。真正的问题在于函数正在输出的值的类型。既然你只是串联的em
使用插值计算的值时,输出是一个字符串,而不是一个号码,所以不能对其执行数学运算。
不用串联em
,而是通过乘以1em
附加单位,现在您的原始代码可以正常工作了。
@function em($pixels, $context: 16px) {
@return ($pixels/$context) * 1em;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句