3

我想创建一个较少的混合来建立一些边距/填充规则。我已经能够为高度、宽度、高度百分比和宽度百分比创建正确的 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。我希望有人能够提供一些可以解决我的问题的建议。

我发现了这个类似的帖子：动态 CSS 属性 in less

4

1 回答 1

3

LESS 当前不支持动态 CSS 属性。缺乏对动态属性的支持是一个批评点，有人认为这是 SASS 优于 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"; }
}
于 2012-08-17T20:53:55.880 回答