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()，则返回mixins @responsive和true，如果不是，则返回：

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

less.css如果变量是真正的保护

2 个答案: