0

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

1 ответ 1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.