如何将包含百分比的变量转换为LESS中的数字，但不使用纯数字

Question

在LESS mixin中，我有一个阿尔法值，即使它是以百分比（xx%）给出的，我也希望将其转换为一个普通数字（0.xx）。我找到了percentage（）函数来将数字转换为百分比，但percentre（xx%）返回"xx00%"，除以100将0.xx转换为0.00xx，这也不好。我在LESS invlove中找到的所有"if-then"语句都在创建一个新的范围，所以虽然我可以检测到"%"，但我无法将该信息传递回变量中使用。

如何将百分比转换为数字，当且仅当它是百分比？

Answer 1

虽然您可以在Less中使用JS来达到所需的效果，但更好的方法是使用内置的ispercentage()和isnumber()类型函数来检查变量值是数字还是百分比，或者两者都不是，然后相应地输出值。

.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;
}

Answer 2

试试这个：替换（~"@｛value｝"，"%"，"）；

Answer 3

好吧，这是一个最终的运行，但我找到了一个解决方案。你可以使用backticks在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;
}