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

【问题标题】：Is it possible to use inheritance for classes inside media queries?是否可以对媒体查询中的类使用继承？
【发布时间】：2017-06-19 20:56:42
【问题描述】：

假设我有这个：

@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。

【问题讨论】：

不，如果你想在全局范围内继承.font-size-xxl，你需要把它放在那里，然后把媒体查询放在里面。 For example（也可以使用 extend 进行简单的属性克隆）。

标签： inheritance less media-queries

【解决方案1】：

您可以使用extend。

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

}

或

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

【讨论】：

至于为什么你当前的方法不起作用，它似乎只复制了具有相同范围的类的 CSS（在媒体查询之外添加一个 .font-size-xxl 类会被使用，或者在每个媒体查询中做同样的事情都会起作用）。不过，我找不到任何东西来证实这一点。
正是我需要的。谢谢你，@ColbySargent。