css - 如何在 less 中创建动态类

Question

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

据我的研究，我认为不可能创建动态生成的类。这是我的代码:

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

期望的输出

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

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

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

Answer 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