主页 / 问题 / 992371
Accepted
John
Asked:2020-06-13 20:15:30 +0000 UTC2020-06-13 20:15:30 +0000 UTC

如何在 LESS 预处理器中进行分支

  • 772

资源：

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

问题：

在这个例子中如何分支？

当我需要指定display: flex时，.less我在文件中写.display(flex)，是否可以默认这样做，以便.display()自动从这个转换display: flex（虽然第一个和第二个参数都必须指定display(@param1, @param2)），系统仍然编译在错误的方式（或根本不起作用）！好吧，当我为 编写所有参数时display(flex, wrap))，一切都很好，但是您只需要使用 display: flex 属性来删除一些块，而无需额外的 flex-wrap: wrap, justify-content: flex-开始

概括：

这个例子只是为了了解混合和分支在 LESS 中是如何工作的。

css

1 个回答

  1. Best Answer

    在 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;
}
    • 1

相关问题