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
}

?

Adam Spicer · Accepted Answer · 2012-09-14 14:04:17Z

16

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/

answered Sep 14, 2012 at 14:04

Adam Spicer

2,72126 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ash Over a year ago

I found what I needed in addition to this answer was a default which is possible using default() function. From the docs at lesscss.org/features/#mixin-guards-feature-conditional-mixins .mixin (@a) when (default()) { ... }

EoghanTadhg · Accepted Answer · 2016-03-11 00:25:46Z

7

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

answered Mar 11, 2016 at 0:25

EoghanTadhg

5225 silver badges14 bronze badges

Collectives™ on Stack Overflow

Conditional CSS rules with less, based on variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related