less.css - 动态设置 css 参数

【问题标题】：less.css - set css parameter dynamicallyless.css - 动态设置 css 参数
【发布时间】：2013-04-18 19:48:07
【问题描述】：

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

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

这可能吗？似乎不适合我。有什么想法吗？

【问题讨论】：

为了未来的访问者的利益，这个 (property name interpolation) 目前可以在 Less 中使用。如果将@marginProperty: 10px; 修改为@{marginProperty}: 10px;，则相关代码将起作用。

标签： less

【解决方案1】：

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

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

.top {
    .margin(10px);
}

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

【讨论】：