超出范围

Question

理想情况下,我想这样做:

@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在许多课程中使用,这两个解决方案都很混乱,并涉及许多重复.

有干净的干燥溶液吗？

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