修改 css变量,css,用@media改变变量

由于我似乎没有得到很多支持将此作为

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;

}

但也看看：