超出范围

Question

理想情况下，我想这样做：

@w: 4px;

@media (max-width:900px) {
    @r: 3px; 
}
@media (min-width:900px) {
    @r: 5px; 
}

.myclass {
    border-radius: @w + @r;
}

这不能编译，因为@r未定义在我定义.myclass的范围内。显而易见的解决方案是在.myclass块内定义@media或在@media的定义内复制.myclass个查询。

但是一旦你在许多课程中使用@r，这两个解决方案都很混乱并且涉及很多重复。

是否有干净的干溶液？

Answer 1

只需使用mixin，它根据mediaquery计算属性值。没有必要通过导入来执行此操作。

<强> LESS：

@w: 4px;
.bordermixin(@w,@r) {
  .myclass{
    border-radius: @w + @r;
  }
}
@media (max-width:900px) {
    .bordermixin(@w,3px);
}
@media (min-width:900px) {
    .bordermixin(@w,5px);
}

<强> CSS：

@media (max-width: 900px) {
  .myclass{
    border-radius: 7px;
  }
}
@media (min-width: 900px) {
  .myclass{
    border-radius: 9px;
  }
}

Answer 2

我找到了一个基于@import的解决方案，让我保持干爽。

我制作了两个文件：

<强> classes.less

@w: 4px;

.myclass {
    border-radius: @w + @r;
}

<强> mediawidth.less

@media (max-width:900px) {
    @r: 3px; 
    @import "classes.less";
}
@media (min-width:900px) {
    @r: 5px; 
    @import "classes.less";
}

生成的CSS：

@media (max-width: 900px) {
  .myclass {
    border-radius: 7px;
  }
}
@media (min-width: 900px) {
  .myclass {
    border-radius: 9px;
  }
}

这样我就不必重复许多类定义，只重复导入。

---

我接受了马丁的答案，在最常见的情况下，当只有少数变量要通过时，这个答案会更加清晰。只要有更多变量，并且在许多文件中定义了类，我的解决方案就会变得干燥和干净。