如何在 less 中创建动态类答案

【问题标题】：How to create dynamic classes in less如何在 less 中创建动态类
【发布时间】：2017-03-18 02:34:39
【问题描述】：

我一直在寻找答案，但要么这不是我真正想要的，要么我没有正确搜索。我想动态生成类名。因为，我经常使用margin-top，所以我有多个使用一组规则定义的类，我想用LESS来实现。

就我所做的研究而言，我认为创建动态生成的类是不可能的。这是我的代码：

.margin-top-(@value)px {
    margin-top: @value;
}

期望的输出

.margin-top-20px {
    margin-top: 20px;
}

.margin-top-100px {
    margin-top: 100px;
}

只是我所期待的一个例子。

【问题讨论】：

你想如何在 HTML 中使用它？从您的代码看来，您将在 HTML 代码中添加 margin-top-20px 类。如果是，那么您可以简单地在您的 less 文件中定义一些帮助类，例如 .margin-20、margin-30。

标签： css less

【解决方案1】：

尝试使用 mixin 来实现。

//define the mixin 
.margin-top(@value) {
    .margin-top-@{value}{    
        margin-top:@value;
    }
}
//use the mixin like this
.margin-top(20px);

你可以在这里试试：http://winless.org/online-less-compiler

【讨论】：