Less 有没有（好的）方法可以在mixin中扩展类，然后在媒体查询中使用该mixin，使用更少的资源？

我一直在努力构建一些更少的文件，以帮助加快我的CSS工作流程，并帮助生成更高效、更干净的CSS

在我看来：

• mixin是帮助加快工作流程的一个很好的方法，但是它们有一个缺点，那就是可能会使输出的CSS比需要的长
• 扩展类是确保最小化重复样式声明数量的理想解决方案，有助于清理重复样式声明

因此，为了帮助平衡，我编写了一组标准的、常用的样式，使用虚拟类（它们存储在通过引用导入的文件中，因此样式只有在扩展时才会输出）。 我将所有的mixin设置为尽可能地扩展这些类，这在大多数情况下都非常有效

然而，我意识到我的陷阱，一旦我得到我的媒体查询。。。我不能在媒体查询中扩展这些类，通常情况下这是可以的，我只记得不要这样做。。但是由于mixin现在也使用我的extens，我现在也不能在媒体查询中使用它们

因此，我不想避免在媒体查询中使用mixin，但我真的希望能够找到一种方法来扩展它们中的类，以尽可能保持输出的干净

到目前为止，我唯一想到的想法是为每个Mixin添加一个额外的参数，以指定它是否应该扩展，但这还不够理想

我希望有人能想出一个更聪明的解决方案，这将允许我保持mixin的优势，它扩展了基本样式类，但也保持了简单的可用性，而不会使事情变得过于复杂。可能要求很高，但希望如此

---

如果我的解释很难理解，我本希望能够做到这一点，但目前不可能做到：

理想输入

//extensions.less
.街区{
显示：块；
}

---

//mixins.less
@导入（参考）“扩展”；
.米辛{
&：扩展（.block）；
保证金：自动；
}

---

//styles.less
@导入“mixin”；
.要素1{
.mixin（）；
}
.要素2{
.mixin（）；
}
@仅介质屏幕和（最大宽度：768px）{
.要素3{
.mixin（）；
}
.要素4{
.mixin（）；
}
}

理想输出

//styles.css
.element1、.element2{
显示：块；
}
.要素1{
保证金：自动；
}
.要素2{
保证金：自动；
}
@仅介质屏幕和（最大宽度：768px）{
.element3、.element4{
显示：块；
}
.要素3{
保证金：自动；
}
.要素4{
保证金：自动；
}
}

简言之，是的，目前这在某种程度上是可能的，但需要对顶级类进行一些额外的包装：

//extensions.less
.街区{
显示：块；
}

---

//mixins.less
@导入（参考）“扩展”；
.mixin（）{
&：扩展（.block）；
保证金：自动；
}

---

//styles.less
@媒体所有{//！
@导入“mixin”；
.要素1{
.mixin（）；
}
.要素2{
.mixin（）；
}
}
@仅介质屏幕和（最大宽度：768px）{
@导入（多个）“混合”；
.要素3{
.mixin（）；
}
.要素4{
.mixin（）；
}
}

.element1

和

.element2

（以及要扩展的任何其他类

.block

）必须放入

@media all

，因为：

顶级扩展匹配所有内容，包括嵌套媒体中的选择器

因此，如果

.element1

和

.element2

停留在全局范围内，它们会泄漏到其他所有

@媒体
.block
声明中


（嗯，实际上对我来说，“顶级扩展匹配所有内容”这件事看起来有问题，并且与另一条“媒体声明中的扩展应该只匹配同一媒体声明中的选择器”规则相矛盾（显然是因为
global scope=@media all
因此它们应该工作相同））.
我从来没有想到过，这确实很有趣。不过，我不确定我是否对这种方法足够满意，是否可以开始使用它。。在一个完美的世界里，我不需要改变我在全球范围内为风格做任何事情的方式。。对媒体查询的特殊处理将在媒体查询中分离出来。（原因是我决定在团队环境中使用此工作流，其他团队成员更熟悉纯CSS。我希望尽可能与我们的旧做法保持兼容性）.实际上，我会在上创建一个专门的问题来讨论是否应该改变这种行为（实际上，“隔离媒体扩展”在中进行了深入讨论，但没有“顶级媒体泄漏”的用例）我个人也认为你使用的工作流（隐藏
extend
在mixin之后）是目前最优雅的方法。