是否可以对媒体查询中的类使用继承？

Question

让我说我有这个：

@media (min-width: 768px) {
    .font-size-xxl {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    .font-size-xxl {
        font-size: 32px;
    }
}

@media (max-width: 479px) {
    .font-size-xxl {
        font-size: 16px;
    }
}

...我希望多个元素继承这些规则。我尝试使用较少的继承：

h1 {
    .font-size-xxl;
}

......但它不起作用。首先，它没有找到类。如果我将它们从媒体查询中删除，但媒体查询覆盖不适用。

我正在努力实现的目标是什么？如果是这样，我错过了什么？

如果重要，我正在使用grunt-contrib-less 1.4.0。

Answer 1

您可以使用extend。

h1:extend(.font-size-xxl) {

}

或

h1 {
  &:extend(.font-size-xxl)
}