css,用@media改变变量

我目前正处于一个响应迅速的站点项目中,而且很少有很多帮助.

但我希望根据窗口大小改变大小变量.
我尝试了以下代码,但它似乎不起作用.这可能,或者我应该尝试另一种方法吗？

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}

解决方法

由于我似乎没有得到很多支持将此作为 this question的副本关闭,我基本上会重复我的答案(有一些变化).

记住@media是一个CSS查询,而不是一个LESS查询

@media查询是一种CSS功能,允许当前加载的CSS响应它所呈现的媒体(通常是某种类型的浏览器,但可以是打印等).

LESS是一个CSS预处理器,它在将CSS加载到浏览器之前创建CSS,因此在检查媒体之前(在CSS本身完成后由LESS生成).

因此,LESS的正确方法是使用与直接CSS相同类型的输出,这意味着您必须在@media查询中重复.menu选择器,以使其值更改为媒体类型.

最终的CSS输出应该是什么样的

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

有各种方法可以用LESS生成类似的东西.严格按照上面的基本格式,有这样的：

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

但也看看：

>有关LESS媒体查询的基本概念：How can I use media queries more efficiently with LESS?
>有关将媒体查询分组并减少重复选择器代码的讨论,请参阅：Media Query grouping instead of multiple scattered media queries that match