less+媒体查询中更改变量

Question

想在屏幕大小改变时更改less中的变量，less代码如下：

@center-size:6rem;
@media (max-height:720px){
      @center-size:15rem;
}

我试过这样好像不行，求解正确方式。

Answer 1

LESS目前无法做到这一点，尽管它在技术上可行。此功能已在GitHub issue Less variables in media queries中提出。
也是这个问题，请参见：
CSS pre-processor with a possibility to define variables in a @media query
https://stackoverflow.com/questions/14139067/css-pre-processor-with-a-possibility-to-define-variables-in-a-media-query

LESS将您的媒体查询编译为实际媒体查询，因此在编译时没有指示哪个媒体查询与浏览器相关。
编译后，你只需要CSS不会少，所以你不能再有变量了。
你可以做到这一点，但它并不很优雅：

@base_width: 100px; 

@media all and (max-width: 768px) { 
    .something { 
     width: @base_width; 
    } 
} 

@media all and (min-width: 769px) { 
    .something { 
     width: @base_width * 2; 
    } 
}