Question

所以我有一个参数mixin（.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来正确地提取填充值。

我遇到的问题是，这需要一对“＆amp; 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构造定义了一个规则集（不是mixin），它不会将其内部变量暴露给外部作用域。即你需要使用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}

// ...

适当减少CSS提取列表

1 个答案: