适当减少 CSS 提取列表答案

【问题标题】：Less CSS extract list appropriately适当减少 CSS 提取列表
【发布时间】：2014-08-12 05:55:17
【问题描述】：

所以我有一个基于子元素宽度计算宽度的参数混合 (.calculateWidth)。我希望这个 mixin 获取如下数据：

@heading: heading (class), none (width), 0 0 20px (padding), 0 (margin);
@imgContainer: imgContainer, 300px, 0 20px, 0;
@textContainer: textContainer, 330px, 0 20px, 0;

...并找到计算宽度所需的所有值（width1、width2、padding l/r 等）

下面是函数调用时的样子：

.calculateWidth(container, @imgContainer, @textContainer, floated);

现在我希望能够使用我想要的任何简写形式（0 20px 0 或 0 20px 等）写入填充值，并让 .calculateWidth 正确提取它。

我遇到的问题是，这需要几个“& when”语句来捕获变量中的结果：

& when(length(@padding1) = 1) {
    @p1-l: @p1;
}
& when(length(@padding1) = 2) {
    @p1-l: extract(@p1, 2);
}
& when(length(@padding1) = 3) {
    @p1-l: extract(@p1, 2);
}
& when(length(@padding1) = 4) {
    @p1-l: extract(@p1, 4);
}

但是当我尝试使用“@p1-l”来计算宽度时，由于范围可变，它不起作用：

width: (@w1 + @p1-l + @p1-r) + (@w2 + @p2-l + @p2-r) + @m1-r;

我一直在尝试一切。任何建议将不胜感激。

【问题讨论】：

标签： css less frontend

【解决方案1】：

& when 构造定义了一个规则集（不是 mixin），它不会将其内部变量暴露给外部范围。 IE。您需要改用 mixin，例如（使用任何合适的名称而不是 .-）：

// ...

.-();
.-() when(length(@padding1) = 1) {
    @p1-l: @p1;
}
.-() when(length(@padding1) = 2) {
    @p1-l: extract(@p1, 2);
}
.-() when(length(@padding1) = 3) {
    @p1-l: extract(@p1, 2);
}
.-() when(length(@padding1) = 4) {
    @p1-l: extract(@p1, 4);
}

// ...

以上可以简化为：

// ...

.-(length(@padding1));
.-(1) {
    @p1-l: @p1;
}
.-(2) {
    @p1-l: extract(@p1, 2);
}
.-(3) {
    @p1-l: extract(@p1, 2);
}
.-(4) {
    @p1-l: extract(@p1, 4);
}

// ...

最后，所有这些都可以简化为：

// ...

.-(length(@padding1));
.-(@i) {@p1-l: extract(@p1, @i)}
.-(1)  {@p1-l: @p1}

// ...

【讨论】：