Conditional CSS rules with less, based on variable

Question

The variable can take percentage or px values, like:

@some-var: 50px; or @some-var: 46%;

How can I define a certain set of CSS rules if the value is in pixels, and a different set of rules if the values is in percentages?

Is there something like

if(isValueInPixels(@some-var)){

  // css rules here


}else{

  // other rules here
}

?

Answer 1

I think you can use something that they call Guarded Mixins.

Try something like this...

.mixin (@a) when (ispixel(@a)) {
 /* ... your pixel specific logic ... */
}
.mixin (@a) when (ispercentage(@a)) {
 /* ... your percentage specific logic ... */
}

.coolStuff {
 .mixin(50px);
 .mixin(50%);
}

See the Guarded Mixins at http://lesscss.org/

Answer 2

As Adam Spicer noted the Guarded Mixins are your best solution. However, LESS now offers a solution to group multiple guards, which will allow this to be accomplished with a single mixin. http://lesscss.org/features/#css-guards-feature

For Example:

.mixin(@a){
  & when (ispixel(@a)){
    //logic
  }
  & when (ispercentage(@a)){
    //logic
  }
}

Usage:

selector{
  .mixin(50px);
  .mixin(46%);
}