less:使用媒体查询的extend()

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;
    }
}

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