Search code examples
csslessmixins

Less guards with an OR operator

I know Less guards can use the and operator, e.g.

when (@width > 50) and (@height > 50) { ... }

But is there a way to do an or statement? When trying the above with the word or, I get the error CSS guard can only be used at the end of selector. I also tried:

when (@width > 50), when (@height > 50) { ... }

But that results in the error Guards are only currently allowed on a single selector.

Solution

  • Just use a comma with no additional when:

    .mixin (@a) when (@width > 50), (@height > 50) { ... }

    Source: http://lesscss.org/features/#mixin-guards-feature-guard-logical-operators