How do I convert a variable containing a percentage to a number in LESS, but leave plain numbers alone?

问题

In a LESS mixin, I have an alpha value that I'd like to convert to a plain number (0.xx) even if it is given as a percentage (xx%). I've found the percentage() function to convert a number to a percentage, but percentage(xx%) returns "xx00%" and dividing by 100 makes 0.xx into 0.00xx, which is no good either. All the "if-then" statements that I could find in LESS invlove making a new scope, so while I could detect the "%", I couldn't pass that information back into a variable to use it.

How do I go about converting a percentage to a number if and only if it is a percentage?

回答1:

While you can use JS within Less to achieve the desired effect, a better approach would be to use the built-in ispercentage() and isnumber() type functions to check whether a variable value is a number or a percentage or neither and then output the value accordingly.

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

Compiled CSS:

div#div1 {
  alpha: 0.2;
}
div#div2 {
  alpha: 0.2;
}
div#div3 {
  alpha: NaN;
}

回答2:

Try this: replace(~"@{value}", '%', '');

回答3:

Well, it's an end-run, but I found a solution. You can use backticks to run arbitrary JS in LESS, so I just did...

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

Which, as desired, yields...

div {
  -percent-property: 0.2;
  -decimal-property: 0.2;
}

来源：https://stackoverflow.com/questions/28685467/how-do-i-convert-a-variable-containing-a-percentage-to-a-number-in-less-but-lea

标签

css

less

less-mixins