css,用@media改变变量

Question

我目前正在进行一个响应迅速的站点项目,而且实际上帮助很少.

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

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

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

.menu {
  width: @menu-width;
}

Answer 1

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

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

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

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

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

最终的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媒体查询的基本概念:如何使用LESS更有效地使用媒体查询？
• 有关将媒体查询分组并减少选择器代码重复的讨论,请参阅:媒体查询分组而不是匹配的多个分散媒体查询