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

Question

我想知道是否有更好的解决方案（或者我的解决方案是否正确）来创建带有变量和守卫的 if 语句。

目标：

• 如果变量设置为 true，则编译代码（有效）
• 如果变量设置为其他任何值，请忽略代码（默认，有效）
• 保持初始代码位置（dosnt 工作，在任何地方被合并.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;
}

因此，如果设置为，则mixins.a()和.b()返回，如果不是，则返回：@responsivetrue

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