2

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

@w: 4px;

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

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

这不会编译，因为@r没有在我定义的范围内定义.myclass。显而易见的解决方案是.myclass在@mediablocs@media内部定义或在.myclass.

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

有干净的干燥溶液吗？

4

2 回答 2

6

只需使用一个 mixin，它会根据媒体查询计算属性值。没有必要通过导入来做到这一点。

较少的：

@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;
  }
}
于 2013-03-18T11:04:35.127 回答
3

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

我制作了两个文件：

类.less

@w: 4px;

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

媒体宽度.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 的回答，在最常见的情况下，当只有少数几个变量要传递时，这会更清晰。一旦您有更多变量并且您的类在许多文件中定义时，我的解决方案可能会更干燥和更清洁。

于 2013-03-18T10:06:04.927 回答