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

所以混入.a()和.b()是否返回@responsive设置为true,如果不是你得到:

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

我希望这有点像你想要的.