Less.css如果变量为true，请注意

Question

我想知道是否有一个更好的解决方案(或者如果我的解决方案甚至是正确的)，创建if语句类似的行为与变量和保护。

目标:

• 如果变量设置为true，编译代码(works)
• 如果变量被设置为其他任何东西，忽略代码(默认，works)
• 保持初始代码位置(不工作，在.responsive (@responsive);被调用的地方合并)

我代码:

@responsive: true;
.responsive(true){
  a {
    color: red;
  }
}
.responsive(true) {
  b {
    color: blue;
  }
}
.responsive (@responsive);

Answer 1

我不太明白你说的没用。

但是如果我……在LESS中有两件事与此相关，你必须记住:

• 作用域重要——而不是顺序(你可以在调用变量/mixin之后定义它，只要你在同一个作用域或一个可访问的作用域中定义它)
• mixin在你调用它的地方呈现而不是在你定义它的地方

也就是说，如果你真的想在多个地方使用相同的保护来做不同的事情，你需要定义多个mixin(每个地方都会得到另一个mixin)，如果你想在你定义它的地方渲染它，你只需要在你定义它之后(或之前)立即调用它。像这样:

@responsive: true;
test1 {
  color:green;
}
.a() when (@responsive){
  a {
    color: red;
  }
}
.a;
test2 {
  color:green;
}

.b() when (@responsive) {
  b {
    color: blue;
  }
}
.b;

的输出将是:

test1 {
  color: green;
}
a {
  color: red;
}
test2 {
  color: green;
}
b {
  color: blue;
}

因此，如果@responsive被设置为true，则返回混合.a()和.b()，如果不是，则得到:

test1 {
  color: green;
}
test2 {
  color: green;
}

我希望这是你想要的

Answer 2

我最终使用了这个:

@responsive: true;
section.content {
  .responsive () when (@responsive) {
    @media (min-width: 768px) {
      float: right;
      width: 80%;
    }
    @media (min-width: 980px) {
      width: 60%;
    }
  }
  .responsive;
}
aside.left {
  .responsive () when (@responsive) {
    @media (min-width: 768px) {
      float: left;
      width: 20%;
    }
  }
  .responsive;
}