less.css - 动态设置css参数

Question

我学习如何使用less.css来创建动态css文件。 我想在我的css文件中创建一个动态属性并加载它，例如：

@marginProperty : margin-left;
.top
{
   @marginProperty: 10px;
}

这可能吗？似乎没有为我编译。有什么想法吗？

Answer 1

这种方式不起作用;您不能从变量设置属性，变量只是这些属性的值。不应为属性设置变量，而应使用mixin。这很棘手，不知道你是如何构建你的LESS / CSS或你的目标是什么，但似乎你需要反过来思考。与SQL一样，CSS是声明性的，因此您必须从代码中描述结果，而不是描述获得该结果的过程。这样的事情可能会这样做：

.margin(@size:10px) {
    margin-left: @size;
}

.top {
    .margin(10px);
}

可以在一个mixin文件中定义.margin mixin，你可以@import它，当你需要重新定义它时，将该mixin文件替换为另一个类似的文件。