Question

我想创建一个less mixin来构建一些margin / padding规则。我已经能够为高度，宽度，高度百分比和宽度百分比创建正确的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"; } }

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

.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"; }
}

创建动态较少mixin设置属性名称

1 个答案: