Question

我正在尝试扩展一个简单的类

.positionAbsolute {
    position: absolute;
}

我的问题是我可以扩展它：

#something:extend(.positionAbsolute) {
   something else
}

但是从媒体查询本身，如果我从外面尝试，根本没有扩展规则。

这是正常行为吗？为什么这样做？，在这种情况下，我将不得不创建四个相等的类来扩展每个媒体查询案例，是否有一些解决方法？

谢谢

Answer 1

我不确定我是否理解它（总是很难猜到你没有看到你需要实现的确切CSS输出），但看起来你需要这样的东西：

.positionAbsolute {
    position: absolute;
}

#something:extend(.positionAbsolute) {
    @media only screen and (min-width: 1024px) {
        something: else;
    }
}

另一种方式是：

.positionAbsolute {
    position: absolute;
}

#class-1,
#class-2 {
    &:extend(.positionAbsolute);
}

@media only screen and (min-width: 1024px) {
    #class-1 {
        something: else;
    }

    #class-2 {
        something-even: more else;
    }
}

这样你就不得不重复选择器而不是媒体查询。

Answer 2

我试图这样做，并且非常失望，我无法将扩展放在媒体查询中。幸运的是，我能够将mixin用于我想要的东西。这可能适用于某些情况。我无法真实地告诉你，你的案件实际上是做什么的。

.centerVertically()
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    border: 2px solid red;

    .content
    {
        display: inline-block;
        vertical-align: middle;
    }
}

用于媒体查询

@media screen and (min-width: @break_tablet)
{
    /* doesn't work
       &:before:extend(.centerVertically_wrapper){}
       .content:extend(.centerVertically_child){}
    */

    .centerVertically();

Answer 3

我想到的最好的我变成了a GIST here。基本上，我为查询创建了一个外化的引用 mixin，并将所有可能的上下文导入其中。

，当您引用要扩展的类时，LESS会查看查询。

参考：

.narrow {
 @media screen and (max-aspect-ratio: 1/1) {
   @import "position";
   @import "z";
 }
}

导出：

@import (reference) "narrow";

.style-1:extend(.position .abs, .narrow .position .rel) {
}
.style-2:extend(.narrow .position .rel) {
}
.style-3:extend(.narrow .z .index-1) {
}

less：使用媒体查询的extend（）

3 个答案: