Less 如何为@media和后代选择器声明相同的样式?
我需要为媒体查询下的元素和另一个类的后代定义相同的样式 更少中的完美解决方案可以是以下[伪代码]:Less 如何为@media和后代选择器声明相同的样式?,less,mixins,less-mixins,Less,Mixins,Less Mixins,我需要为媒体查询下的元素和另一个类的后代定义相同的样式 更少中的完美解决方案可以是以下[伪代码]: .foo { color:red; .example &, @media (min-width:800px) { color:blue; } } 这应该是可取的,它将被汇编成: .foo { color: red; } .example .foo { color: blue; } @media (min-width: 800px) { .foo
.foo
{
color:red;
.example &,
@media (min-width:800px)
{
color:blue;
}
}
这应该是可取的,它将被汇编成:
.foo {
color: red;
}
.example .foo {
color: blue;
}
@media (min-width: 800px) {
.foo {
color: blue;
}
}
此语法不正确,但是,您有什么建议来解决我的问题吗?我认为您的逗号可能是导致错误的原因
.foo {
color:red;
.example & {
color:blue;
@media (min-width:800px) {
color:blue;
}
}
}
这是输出以下内容的正确语法:
.foo {
color: red;
}
.example .foo {
color:blue;
}
@media (min-width:800px) {
.example .foo {
color:blue;
}
}
不,选择器和
@media
查询是太不同的语言实体(尽管有类似的{}
语法),因此在示例中不能将它们与逗号组合在一起
因此,要使其干燥(假设共享样式当然有多个属性),您需要一个mixin(或某种类型),例如:
.foo {
color: red;
.somename() {
color: blue;
}
.example & {.somename}
@media (min-width: 800px) {.somename}
}
另请参阅示例(如果您需要更通用的解决方案)。感谢@seven Phase max的建议,我最终使用找到了一个可能的解决方案:
@screen-xs: 480px;
@screen-sm: 769px;
@screen-md: 992px;
@screen-lg: 1200px;
.MEDIAQUERY(@only-media, @min-max, @size, @RULES)
{
@screen-width:~"@{screen-@{size}}";
@mediaQuery: ~"screen and (@{min-max}-width: @{screen-width})";
@media @mediaQuery { @RULES(); }
& when (@only-media = false) {
.@{size} & { @RULES(); }
}
}
.foo_media-and-class
{
color:red;
.MEDIAQUERY(@only-media:false, @min-max:max, @size:md,
{
color:blue;
}
);
.MEDIAQUERY(@only-media:false, @min-max:min, @size:lg,
{
color:yellow;
}
);
}
.foo_only-media
{
color:red;
.MEDIAQUERY(@only-media:true, @min-max:max, @size:md,
{
color:blue;
}
);
.MEDIAQUERY(@only-media:true, @min-max:min, @size:lg,
{
color:yellow;
}
);
}
此解决方案不仅提供了功能,还提供了其他选项:
- 可以为媒体查询设置屏幕宽度的自定义值
- 传递媒体查询中使用的属性的
值(尝试传递“MIN/MAX
”而不是“MAX
”调用.MEDIAQUERY mixin)MIN
- 通过
布尔值切换简单媒体查询或媒体查询+后代选择器的生成@仅媒体
.example.foo
,而我想要的输出与您在我的问题中看到的略有不同