我真的很高兴发现您可以创建一个媒体查询变量,您可以轻松地重用该变量并使您的代码更具可读性。
@tablet: ~"(min-width: 768px) and (max-width: 980px)";
@media @tablet { ... }
我想知道是否可以将媒体查询与选择器分组。它似乎不像我实现的那样工作,但我想我会问一下它是否有可能。
@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
aside { ... }
&.homepage,
@media @tablet {
aside { ... }
}
}
我知道媒体查询与普通选择器不同,因为您必须在媒体查询内部定义选择器,但是是否有一些巫术 LESS 方法来完成这样的分组?
我不是 100% 确定你想要的输出,但是这个 LESS 只定义了颜色red
一次,并将其应用于两者:
@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
aside { color: blue }
&.homepage {
aside { color: red }
}
@media @tablet {
.homepage;
}
}
产生这个CSS:
body aside {
color: #0000ff;
}
body.homepage aside {
color: #ff0000;
}
@media (min-width: 768px) and (max-width: 980px) {
body aside {
color: #ff0000;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)