Jak używać if statements in LESS

Istnieje sposób użycia strażników dla pojedynczych (lub wielu) atrybutów.

@debug: true;

header {
    /* guard for attribute */
    & when (@debug = true) {
        background-color: yellow;
    }
    /* guard for nested class */
    #title when (@debug = true) {
        background-color: orange;
    }
}

/* guard for class */
article when (@debug = true) {
    background-color: red;
}

/* and when debug is off: */
article when not (@debug = true) {
    background-color: green;
}

...and with Less 1.7; kompiluje do:

header {
    background-color: yellow;
}
header #title {
    background-color: orange;
}
article {
    background-color: red;
}

Natknąłem się na to samo pytanie i znalazłem rozwiązanie.

Najpierw upewnij się, że zaktualizowałeś przynajmniej do mniejszego 1.6. Możesz użyć npm do tego przypadku.

Teraz możesz użyć następującej mixin:

.if (@condition, @property, @value) when (@condition = true){
     @{property}: @value;
 }

Od mniej niż 1.6 możesz również przekazać nazwy właściwości do Mixinów. Więc na przykład możesz po prostu użyć:

.myHeadline {
   .if(@include-lineHeight,  line-height, '35px');
}

Jeśli @include-lineheight zmieni wartość na true LESS wyświetli line-height: 35px i pominie Mixin, jeśli @include-lineheight nie jest prawdą.

Napisałem mixin dla jakiegoś cukra składniowego;)
Może ktoś lubi ten sposób pisania if-then-else lepszy niż używanie

Zależy od mniej 1.7.0

Https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

Użycie:

.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});

.if(lightness(#fff) gt (20% * 2), {
    .-then(){
        log {
            is-light: true;
        }
    }
});

Użycie na przykładzie z góry

.if(@debug, {
    .-then(){
        header {
            background-color: yellow;
            #title {
                background-color: orange;
            }
        }
        article {
            background-color: red;
        }
    }
});