突破范围

Question

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

@w: 4px;

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

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

这不能编译，因为我定义.myclass的作用域中没有定义@r。显而易见的解决方案是要么在@media块中定义.myclass，要么在.myclass的定义中复制@media查询。

但是，一旦在许多类中使用了@r，两种解决方案都会变得杂乱无章，并且涉及许多重复操作。

有干净的干洗液吗？

Answer 1

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

更少的：

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

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

我接受了Martin的答案，在最常见的情况下，当只有几个变量需要传递时，这个答案要简洁得多。我的解决方案可能是，一旦你有了更多的变量，当你的类被定义在许多文件中时，我的解决方案就会变得更加干练和干净。