超出范围 [英] Break out of scope

问题描述

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

  @w：4px; 
 
 @media（max-width：900px）{
 @r：3px; 
} 
 @media（min-width：900px）{
 @r：5px; 
} 
 
 .myclass {
 border-radius：@w + @r; 
} 
  

这不会编译，因为 @r 未在定义 .myclass 的作用域中定义。显而易见的解决方案是在 @media 块中定义 .myclass 或复制在 .myclass 定义中的@media 查询。

但是，在许多类中使用 @r ，这两个解决方案都是混乱的，涉及很多重复。

？

解决方案

只需使用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; 
} 
} 
  

Ideally, I would like to do this :

@w: 4px;

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

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

This doesn't compile because @r isn't defined in the scope where I define .myclass. The obvious solutions are either to define .myclass inside the @media blocs or to copy the @media queries inside the definition of .myclass.

But as soon as you use @r in many classes, both solutions are messy and involve many duplications.

Is there a clean dry solution ?

解决方案

Just use a mixin, that calculates the property values according to the mediaquery. It is unnecessary to do this via import.

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

这篇关于超出范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！