css - Less - 如何将@variable 插入到属性中（而不是值）

Question

在 less.js 中，我可以毫无问题地用变量替换值。

@gutter: 20px;
margin-left:e(%("-%d"), @gutter);

尝试用变量替换属性时，出现错误。我将如何在 Less 中执行以下操作？

@gutter: 20px;
@direction: left;
e(%("margin-%d"), @direction):e(%("-%d"), @gutter);

Answer 1

感谢 Alvivi 的解决方案和研究（您因此获得了奖励）。我决定添加以下内容作为实际答案，因为这是一种真正的设置方法，而不是查看 .blah() 伪代码。

这是一个真正的设置策略：

@gutter: 20px;
@dir: left;
@dirOp: right;

然后创建 mixins 来增强边距和填充，如下所示：

.margin(left, @dist:@gutter) {
    margin-left:@dist;
}
.margin(right, @dist:@gutter) {
    margin-right:@dist;
}
.padding(left, @dist:@gutter) {
    padding-left:@dist;
}
.padding(right, @dist:@gutter) {
    padding-right:@dist;
}
.lr(left, @dist: 0) {
    left: @dist;
}
.lr(right, @dist: 0) {
    right: @dist;
}

..那么你可以

#selector {
    .margin(@dir);
} 

或者

#selector {
    .margin(@dirOp, 10px);
}

全部一起：

#selector {
    .margin(@dir);
    .margin(@dirOp, 50px);
    .padding(@dir, 10px);
    .padding(@dirOp);
    float:@dir;
    text-align:@dirOp;
    position:absolute;
    .lr(@dir);
}

轻松轻松的 LTR/RTL 与 LESS！哇！

Answer 2

如文档所述，转义用于创建 CSS 值（而不是属性）。

这里有一些解决方法的讨论。一种是使用参数 mixins。例如：

.g ()       { /* Common properties */ }
.g (right)  { margin-right: e(...) } 
.g (left)   { margin-left: e(...) }