LESS:您可以将CSS选择器与媒体查询分组吗? [英] LESS: Can you group a CSS selector with a media query?
问题描述
我非常喜欢发现您可以创建一个媒体查询变量,您可以轻松地重复使用,并使您的代码更易于阅读。
I really enjoyed finding out you could create a media query variable that you can easily reuse and makes your code much more readable.
@tablet: ~"(min-width: 768px) and (max-width: 980px)";
@media @tablet { ... }
我想知道是否可以使用选择器对媒体查询进行分组。它似乎不工作的方式我实现它,但我想我会问,如果它是可能的。
I want to know if it's possible to group a media query with a selector. It doesn't appear to work the way I've implemented it, but I thought I'd ask to see if it's even probable.
@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
aside { ... }
&.homepage,
@media @tablet {
aside { ... }
}
}
我知道媒体查询与运行-mill选择器,因为你必须在媒体查询中定义你的选择器,但是有一些voodoo LESS方法来完成这样的分组吗?
I understand that media queries are different from run-of-the-mill selectors because you have to define your selectors inside of the media query, but is there some voodoo LESS way to accomplish grouping like this?
推荐答案
我不是100%确定的输出,但这个LESS只定义了颜色红色
一次,并应用于两者: / p>
I'm not a 100% certain of the output you are going for, but this LESS only defines the color red
once, and applies it to both:
@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;
}
}
这篇关于LESS:您可以将CSS选择器与媒体查询分组吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!