我已经尝试了一切,但我无法让Stylus CSS预处理器在媒体查询中使用变量.
例如,这不起作用:
t = 1000px
@media screen and (max-width: t)
html
background blue
有人知道怎么做吗？
目前,我使用LESS作为我的主要CSS预处理器.我(我相信很多人都有这个需要)在@media查询中定义变量,如:
@media screen and (max-width: 479px) {
myVar: 10px;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
myVar: 20px;
}
@media screen and (min-width: 768px) {
myVar: 30px;
}
.myElement {
padding: @myVar;
}
这在LESS中不起作用,因为编译性质(@myVar仅在每个特定范围内定义@media,但不是全局定义).即使我@myVar在媒体查询之前全局定义,它也不会根据媒体查询进行更新,.myElement无论如何都会获得初始值.
所以,问题是,是否有可能在任何其他CSS预处理器中实现这一点,或者我们注定要覆盖.myElement每个媒体查询中的内容？这个最简单的例子不是问题,但在实际项目中,这可以节省大量时间和复制/粘贴.
编辑: 不是解决方案,而是我的特定项目的解决方法:
<html>为基本字体大小myVar定义LESS变量rem而不是px基本字体大小的衍生@media查询调整不同媒体的基本字体大小.rem(http://caniuse.com/#search=rem).这在IE 8及更低版本中不起作用,但不是因为缺乏支持rem- 它不支持媒体查询.所以IE8及以下版本无论如何都可以获得全尺寸无媒体查询样式表.代码段: …
理想情况下,我想这样做:
@w: 4px;
@media (max-width:900px) {
@r: 3px;
}
@media (min-width:900px) {
@r: 5px;
}
.myclass {
border-radius: @w + @r;
}
这不会编译,因为@r没有在我定义的范围中定义.myclass.显而易见的解决方案是.myclass在@mediablocs 内定义或者在定义中复制@media查询.myclass.
但是,一旦你@r在许多课程中使用,这两个解决方案都很混乱,并涉及许多重复.
有干净的干燥溶液吗？