如何在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