Less 减：复杂的混合参数

问题是：我想为有填充物的盒子的“凹口”角创建一个较少的混合

图像示例：

此框的右上角和左下角有缺口，内容方格为：before/：after

我想创建一个mixin，所以我不必为所有可能的选项创建一个类

类似于。盒装角（右上角，左下角）

我无力的尝试是：

@box-padding: 10px;

.boxed-corners(@pos1 @pos2, @pos3 @pos4) {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @pos1: 0;
        @pos2: 0;
    }
    &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @pos3: 0;
        @pos4: 0;
    }
}

但这是无效的，因为在变量集之间。即使添加了@pos1或@pos2，也不会使用您输入的字符串（上、左、右、下）

我知道我离成功还有很长的路要走，但也许有办法做到这一点。有什么想法吗

编辑：谢谢七个阶段max，这就是我想要的：

谢谢大家!！就是这样，我只是不知道该找什么。我现在的工作代码是：

.boxed-corners(@pos1; @pos2; @pos3; @pos4) {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos3}: 0;
        @{pos4}: 0;
    }
}

---

唯一不好的是，所有四个值都必须用逗号（底部、左侧、顶部、右侧）来分隔，而不是（底部、左侧、顶部、右侧），但我接受它。

我认为@seven phases max的注释旨在向您展示创建一个可以用

调用的混音（底部、左侧、顶部、右侧）

使用较少的列表功能可以轻松完成。事实上，相应的文档可以在

例如，按如下方式重写混音：

.boxed-corners(@before; @after; @box-padding:10px) {
    position: relative;
    @pos1: extract(@before,1);
    @pos2: extract(@before,2);
    @pos3: extract(@after,1);
    @pos4: extract(@after,2);

    &:before, &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:before {
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:after {
        @{pos3}: 0;
        @{pos4}: 0;
    }
}

.boxed-corners（）

可以按如下方式调用，所有示例都给出相同的结果：

sel1 {
.boxed-corners(top right, bottom left);
}

sel2 {
.boxed-corners(top right; bottom left);
}

sel3 {
.boxed-corners(top, right; bottom, left);
}

---

只要看看

@pos1:0语句。是的，它实际上只是定义了新的
@pos1
变量，所以它显然不能用于CSS属性生成。你需要的是。实际上你可以使用
（左下，右上）
。请参阅示例和。@bmac请不要用答案编辑您的问题，而是自己创建一个答案并接受，谢谢