Less 组合较少的混音输出

我正在寻找某种媒体查询的

extend

，但我知道

extend

在这里并不合适

我有一个mixin，应该为每个mixin创建类和媒体查询。不幸的是，我当前的mixin会像您预期的那样一个接一个地创建这些，这会导致特殊性问题

:

其结果如下：

.top-margin1-xs {
    margin-top: 6px;
}
@media (min-width: 768px) {
    .top-margin1-sm {
        margin-top: 6px;
    }
}
@media (min-width: 992px) {
    .top-margin1-md {
        margin-top: 6px;
    }
}
@media (min-width: 1200px) {
    .top-margin1-lg {
        margin-top: 6px;
    }
}
.top-margin7-xs {
    margin-top: 60px;
}
@media (min-width: 768px) {
    .top-margin7-sm {
        margin-top: 60px;
    }
}
@media (min-width: 992px) {
    .top-margin7-md {
        margin-top: 60px;
    }
}
@media (min-width: 1200px) {
    .top-margin7-lg {
        margin-top: 60px;
    }
}

然而：

---

感谢您的帮助。我怀疑这在更少的时间里是不可能的。

选项1:（如果您知道所有的类）

这当然很复杂，但您可以使用较少的循环来实现这一点。关键部分是更改父mixin以接受多个参数（即，

@el

，

@value

对），并添加新的mixin以循环遍历参数并生成所需的输出

_responsive-margins-top（1，6px；7，60px）；/*将所有el+值对作为参数发送*/
@屏幕xs:480px；
@屏幕sm:768px；
@屏幕md:992px；
@屏幕lg:1200px；
/*支持多个参数的父mixin*/
._-margins-top（@args…{
.loop args（长度（@args），xs）；/*为xs大小生成类*/
@介质（最小宽度：@screen sm）{
/*调用媒体查询中的循环，以便一次生成所有类*/
.loop args（长度（@args），sm）；/*为sm大小生成类*/
}
@介质（最小宽度：@screen-md）{
.loop args（长度（@args），md）；/*为md大小生成类*/
}
@介质（最小宽度：@屏幕lg）{
.loop args（长度（@args），lg）；/*为lg大小生成类*/
}
}
/*循环mixin，用于迭代el+值对*/
.loop参数（@index，@size）在（@index>0）{
@arg:extract（@args，@index）；/*根据迭代索引提取每个el+值对*/
@el:提取（@arg，1）；/*提取el+值对中的第一个值*/
@值：提取（@arg，2）；/*提取el+值对中的第二个值*/
@sel:~“上边距@{el}-@{size}”/*通过连接文本+el+大小来选择表单*/
.@{sel}{margin top:@value；}
.loop参数（@index-1，@size）；/*调用下一次迭代*/
}

---

选项2:（如果以后需要添加类而不编辑基本文件）

下面的内容对我来说似乎有点过于冗长，但这是一个可以用于您的用例的选项。它涉及将规则写入父mixin中的公共mixin名称，然后在媒体查询下调用它们

框架（无基础）：

\u-responsive-margins-top（1,6px）；
.(7,60px),；
@屏幕xs:480px；
@屏幕sm:768px；
@屏幕md:992px；
@屏幕lg:1200px；
._响应式页边距-top（@el，@value）{
@xs:~“上边距@{el}-xs”；
@sm:~“顶边{el}-sm”；
@md:~“上边距{el}-md”；
@lg:""上缘{el}-lg";；
.xs（）{
.@{xs}{margin top:@value；}
}
.sm（）{
.@{sm}{margin top:@value；}
}
.md（）{
.@{md}{margin top:@value；}
}
.lg（）{
.@{lg}{margin top:@value；}
}
}
&{.xs（）；}
@媒体（最小宽度：@screen sm）{.sm（）；}
@媒体（最小宽度：@screen md）{.md（）；}
@介质（最小宽度：@screen lg）{.lg（）；}

加载项：（包含前端开发人员提供的额外类的文件）

@import“base.less”/*导入基*/
._-responsive-margins-top（990px）；/*打电话进来*/

这看起来不错，但只有一个预订。我需要能够在以后向代码中添加。

\u responsive-margins-top

，从而添加另一个我还没有预见到的类。您的解决方案假定我已经知道所有这些类。@Dominik：以后当您需要创建另一个类时，您仍然需要编辑代码，因此不再再次调用mixin，只需编辑前面的调用即可。将调用放在父mixin和文件的底部，以便在必要时对其进行编辑。除此之外，我认为没有比这更好的解决方案了：（Thabks Harry。我们正在为公司编写一个框架，并阻止我们的前端用户编辑源代码。我必须查看循环，如果我无法让它工作，我会接受你的答案，因为它确实回答了我的问题。（只是不是我的用例）谢谢！这正是我所希望的。感谢你，好先生！第二段（顺便说一句）可以简化为。

.top-margin1-xs {
    margin-top: 6px;
}
@media (min-width: 768px) {
    .top-margin1-sm {
        margin-top: 6px;
    }
}
@media (min-width: 992px) {
    .top-margin1-md {
        margin-top: 6px;
    }
}
@media (min-width: 1200px) {
    .top-margin1-lg {
        margin-top: 6px;
    }
}
.top-margin7-xs {
    margin-top: 60px;
}
@media (min-width: 768px) {
    .top-margin7-sm {
        margin-top: 60px;
    }
}
@media (min-width: 992px) {
    .top-margin7-md {
        margin-top: 60px;
    }
}
@media (min-width: 1200px) {
    .top-margin7-lg {
        margin-top: 60px;
    }
}

.top-margin1-xs {
    margin-top: 6px;
}
.top-margin7-xs {
    margin-top: 60px;
}
@media (min-width: 768px) {
    .top-margin1-sm {
        margin-top: 6px;
    }
    .top-margin7-sm {
        margin-top: 60px;
    }
}
@media (min-width: 992px) {
    .top-margin1-md {
        margin-top: 6px;
    }
    .top-margin7-md {
        margin-top: 60px;
    }
}
@media (min-width: 1200px) {
    .top-margin1-lg {
        margin-top: 6px;
    }
    .top-margin7-lg {
        margin-top: 60px;
    }
}