if-statement - less.css 如果变量是真正的守卫

Question

我想知道是否有更好的解决方案(或者我的解决方案是否正确)来创建 if 语句，例如使用变量和守卫的行为。

目标:

如果变量设置为 true，则编译代码(有效)

如果变量设置为其他任何值，忽略代码(默认，有效)

保持初始代码位置(不起作用，在调用 .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;
}

所以混合 .a()和 .b()如果 @responsive 则返回设置为 true ，如果不是，你会得到:

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

我希望这就是你想要的。