CODEWITHSUNDEEP
csslessguardnot-operator
Matthew Flaschen
Matthew Flaschen

Reputation: 284947

How do I execute a LESS guard when a boolean is not true?

embeddable is a custom LESS PHP function that returns a boolean.

I can do something with a LESS (lessphp) guard when a boolean function returns true:

.my-mixin(@url) when(embeddable(@url)) {
    background-color: #abc;
}

.smallClass {
    .my-mixin('small.png');
}

It yields:

.smallClass {
    background-color: #abc;
}

as expected.

How do I do it when that is not true (not operator). The obvious:

.my-mixin(@url) when(embeddable(@url)) {
        background-color: #abc;
}

.my-mixin(@url) when(not(embeddable(@url))) {
        background-color: #389;
}

.bigClass {
        .my-mixin('big.png');
}

is silently dropped, along with the block using it. Note, I kept the true version of the guard, so in case the predicate was wrong, the true version should be used. I then tried:

.my-mixin(@url) when(!embeddable(@url)) {
    background-color: #389;
}

in place of the not version.

The mixin is just preserved into the CSS (rather than compiled), and the bigClass block that tries to use it is still silently dropped.

Same with:

.my-mixin(@url) when(embeddable(@url) != true) {
        background-color: #389;
}

Upvotes: 3

Views: 5548

Answers (1)

ScottS
ScottS

Reputation: 72271

Proper LESS Syntax

Note the change below in your code of the not version:

.my-mixin(@url) when (embeddable(@url)) {
        background-color: #abc;
}

.my-mixin(@url) when not (embeddable(@url)) {
        background-color: #389;
}

.bigClass {
        .my-mixin('big.png');
}

Caution

Per the lesscss.org site, "the keyword true is the only truthy value," which can be somewhat confusing. What this means in your example is that the PHP function needs to return the value true to get a hit on the true mixin, and anything else will be false. If you were to pass 1 (often considered true in programming languages) or even if you were to pass from your example 'big.png' it would not match to true, so graphically (as if the value has been passed), these are the results of various passed combinations:

.my-mixin('big.png') when (true) <-- evaluates to TRUE
.my-mixin('big.png') when (1) <-- evaluates to FALSE
.my-mixin('big.png') when ('big.png') <-- evaluates to FALSE (most confusing)
.my-mixin('big.png') when ('true') <-- evaluates to FALSE (as it is a string)

For some further discussion on this "truthy" aspect of LESS, see this SO answer.

Upvotes: 5

Related Questions