Как использовать инструкции if в LESS

Ответ 1

LESS имеет защитные выражения для mixins, а не отдельные атрибуты.

Итак, вы создали бы такой микс:

.debug(@debug) when (@debug = true) {
    header {
      background-color: yellow;
      #title {
          background-color: orange;
      }
    }

    article {
      background-color: red;
    }
}

И включите или выключите его, вызвав .debug(true); или .debug(false) (или не вызвав его вообще).

Ответ 2

Существует способ использования охранников для отдельных (или нескольких) атрибутов.

@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;
}

... и с меньшим 1.7; компилируется в:

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

Ответ 3

Я наткнулся на один и тот же вопрос, и я нашел решение.

Сначала убедитесь, что вы обновили до МЕНЬШЕ 1.6. Вы можете использовать npm для этого случая.

Теперь вы можете использовать следующий mixin:

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

Так как LESS 1.6 вы также можете передавать PropertyNames в Mixins. Например, вы можете просто использовать:

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

Если @include-lineheight разрешает true, LESS будет печатать line-height: 35px, и он пропустит mixin, если @include-lineheight не является истинным.

Ответ 4

Я написал mixin для синтаксического сахара;)
Возможно, кому-то нравится этот способ написания if-then-else лучше, чем использование охранников

зависит от Less 1.7.0

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

Использование:

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

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

, используя пример сверху

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