超出范围

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

@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在许多课程中，这两种解决方案都很混乱并且涉及许多重复。

有没有干净干燥的解决方案？

只需使用 mixin，它根据媒体查询计算属性值。无需通过导入来执行此操作。

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