在 LESS mixin 中,我有一个 alpha 值,我想将其转换为纯数字 (0.xx),即使它以百分比 (xx%) 的形式给出。我找到了将数字转换为百分比的 percent() 函数,但是 percent(xx%) 返回“xx00%”,除以 100 使 0.xx 变为 0.00xx,这也不好。我可以在 LESS 中找到的所有“if-then”语句都涉及创建一个新范围,因此虽然我可以检测到“%”,但我无法将该信息传递回变量以使用它。
当且仅当它是百分比时,我如何将百分比转换为数字?
在 LESS mixin 中,我有一个 alpha 值,我想将其转换为纯数字 (0.xx),即使它以百分比 (xx%) 的形式给出。我找到了将数字转换为百分比的 percent() 函数,但是 percent(xx%) 返回“xx00%”,除以 100 使 0.xx 变为 0.00xx,这也不好。我可以在 LESS 中找到的所有“if-then”语句都涉及创建一个新范围,因此虽然我可以检测到“%”,但我无法将该信息传递回变量以使用它。
当且仅当它是百分比时,我如何将百分比转换为数字?
虽然您可以在 Less 中使用 JS 来达到预期的效果,但更好的方法是使用内置函数ispercentage()
和isnumber()
type 函数来检查变量值是数字还是百分比或两者都不是,然后相应地输出该值。
.percentlike(@var) {
& when (ispercentage(@var)){ /* is input value a percentage */
alpha: unit(@var / 100); /* unit() strips the % symbol */
/* you could also use the replace function like below
@percentage: @var / 100;
alpha: replace(~"@{percentage}", "%", "");
*/
}
& when not (ispercentage(@var)) and (isnumber(@var)){ /* not percentage but is a number */
alpha: @var;
}
& when not (ispercentage(@var)) and not (isnumber(@var)){ /* neither */
alpha: ~"NaN";
}
}
div#div1 {
.percentlike(20%);
}
div#div2{
.percentlike(0.2);
}
div#div3{
.percentlike(a);
}
编译的CSS:
div#div1 {
alpha: 0.2;
}
div#div2 {
alpha: 0.2;
}
div#div3 {
alpha: NaN;
}
好吧,这是一个结束运行,但我找到了解决方案。您可以使用反引号在 LESS 中运行任意 JS,所以我只是这样做了...
.percentlike(@var1, @var2) {
-percent-property: ~`"@{var1}".match(/%$/) ? parseFloat("@{var1}") / 100 : parseFloat("@{var1}")`;
-decimal-property: ~`"@{var2}".match(/%$/) ? parseFloat("@{var2}") / 100 : parseFloat("@{var2}")`;
}
div {
.percentlike(20%, 0.2);
}
根据需要,这会产生...
div {
-percent-property: 0.2;
-decimal-property: 0.2;
}
试试这个:replace(~"@{value}", '%', '');