2

在 LESS mixin 中，我有一个 alpha 值，我想将其转换为纯数字 (0.xx)，即使它以百分比 (xx%) 的形式给出。我找到了将数字转换为百分比的 percent() 函数，但是 percent(xx%) 返回“xx00%”，除以 100 使 0.xx 变为 0.00xx，这也不好。我可以在 LESS 中找到的所有“if-then”语句都涉及创建一个新范围，因此虽然我可以检测到“%”，但我无法将该信息传递回变量以使用它。

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

4

3 回答 3

3

虽然您可以在 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;
}
于 2015-02-24T06:05:43.853 回答
0

好吧，这是一个结束运行，但我找到了解决方案。您可以使用反引号在 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;
}
于 2015-02-23T23:43:31.607 回答
0

试试这个：replace(~"@{value}", '%', '');

于 2015-02-23T23:20:10.307 回答