Как сделать ветвление в препроцессоре LESS

119

11 февраля 2021, 04:10

Resource:

    @offset: 20px;
    .display(@flex, @wrap){
      display: @flex;
      flex-wrap: if((true), @wrap, null); //эту строку я писал основываясь логически, но все равно она не работает
    }
    Подключение файла
        @import "block-01/some.less";
    .some{
      .display(flex); // на этой строке нужно обойтись не указывая параметр, то есть сделать ее по умолчанию, чтобы она автоматически преобразовалось display:flex
      height: @offset;
    }

Question:

Как на этом примере сделать ветвление?

Когда мне нужно указать display: flex, в .less файле я прописываю .display(flex), а можно ли сделать это по умолчанию, чтобы .display() автоматически преобразовал из этого display: flex(хотя надо указывать и первый и второй параметр display(@param1, @param2)), система все равно компилится не нужным образом(или вообще не работает)! Ну вот когда пишу все параметры для display(flex, wrap)), то все хорошо, но будут и блоки, которыми нужно только отделаться лишь просто свойством display: flex, без дополнительных flex-wrap: wrap, justify-content: flex-start

Summary:

Данный пример исключительно для того, чтобы просто разобраться как же работают миксины и ветвление в LESS

Answer 1

В less вместо условий используется "защита примесей" с помощью конструкции when. Значения по умолчанию прописываются через ":". Вот как это надо прописать.

@offset: 20px;
.display(@flex: flex, @wrap: nil) when not (@wrap = nil) {
  display: @flex;
  flex-wrap: @wrap;
}
.display(@flex: flex, @wrap: nil) when (@wrap = nil) {
  display: @flex;
}
.some{
  .display(); 
  height: @offset;
}
.some2 {
  .display(flex,nowrap); 
  height: @offset;
}

Также для случая "else" можно использовать параметр "default()" например можно записать так.

@offset: 20px;
.display(@flex: flex, @wrap: nil) when not (@wrap = nil) {
  display: @flex;
  flex-wrap: @wrap;
}
.display(@flex: flex, @wrap: nil) when (default()) {
  display: @flex;
}
.some{
  .display(); 
  height: @offset;
}
.some2 {
  .display(flex,nowrap); 
  height: @offset;
}