css - 适当减少 CSS 提取列表

Question

所以我有一个参数混合 (.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;

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

Answer 1

& when 构造定义了一个规则集(不是混合)，它不会将其内部变量暴露给外部范围。 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}

// ...