创建动态少混合设置属性名称

Question

我想创建一个 less mixin 来建立一些边距/填充规则。我已经能够为高度、宽度、高度百分比和宽度百分比创建正确的 mixin。例如，

.widthX (@px) when (@px > 0) and (@px =< 30) {
    .width(@px);
    .widthX(@px - 1);
}

.widthX (@px) when (@px >= (30 + 5)) {
    .width(@px);
    .widthX(@px - 5);
}

.width (@px) { (~".w@{px}") { width: ~"@{px}px"; } }

这允许我创建显式宽度或一系列宽度类。下面将为宽度 1-30 以 1 为增量创建 CSS 类，然后从 30-1215 以 5 为增量创建 CSS 类。

.widthX (1215);

在它正确创建的 CSS 中：

.w1 { width: 1px; }
.w2 { width: 2px; }
// 3-29 ommitted
.w30 { width: 30px; }
.w35 { width: 35px; }
.w40 { width: 40px; }
.w45 { width: 45px; }
// etc

我希望能够为边距和填充创建一个类似的 mixin，并允许我将每一边添加为参数，

.marginX (@px,@side,@abbr) when (@px > 0) {
    .margin(@px,@side,@abbr);
    .marginX(@px - 1,@side,@abbr);
}

.margin (@px,@side,@abbr) { (~".w@{abbr}@{px}") { ~"width-${side}": ~"@{px}px"; } }

并将其称为：

.marginX(100,"top","t");

为 1-100px 创建 margin-top 类。但是，我不断收到语法错误

{ ~"width-${side}": ~"@{px}px"; } }

我尝试了许多变体，但都失败了。我可以，但真的不想，为每个方向创建多个 mixin。我希望有人能够提供一些可以解决我的问题的建议。

我发现了这个类似的帖子：dynamic css properties in less

Answer 1

LESS 目前不支持动态 CSS 属性。缺乏对动态属性的支持是some argue is an advantage of SASS over LESS 的一个批评点。某些库（例如，less.js）上确实存在拉取请求，它们添加了此功能。

否则，您几乎只能做您不想做的事情，即：

.margin (@px,@side,@abbr) when (@side = left) {
  (~".m@{abbr}@{px}") { margin-left: ~"@{px}px"; }
}
.margin (@px,@side,@abbr) when (@side = right) { 
  (~".m@{abbr}@{px}") { margin-right: ~"@{px}px"; }
}