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,轻松!活泉!