LESS：复杂的 mixin 参数答案

【问题标题】：LESS: Complicated mixin parametersLESS：复杂的 mixin 参数
【发布时间】：2014-10-08 10:59:16
【问题描述】：

问题：我想为有填充的盒子的“缺口”角创建一个 LESS 混合。

图片示例：http://i.imgur.com/l9H6w4o.png

这个框的右上角和左下角有缺口，带有:before/:after 内容方块。

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

类似 .boxed-corners(top right, bottom left);

我的微弱尝试是这样的：

@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 也不会使用您输入的字符串（上、左、右、下）。

我知道我还差得很远，但可能有办法做到这一点。有什么想法吗？

编辑：感谢 7-phases-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;
    }
}

唯一不好的是所有四个值都必须用逗号分隔（下、左、上、右），而不是（左下、右上），但我会接受。

【问题讨论】：

再看一次@pos1: 0; 声明。是的，它实际上只是定义了新的@pos1 变量，所以它显然不能用于CSS 属性生成。你需要的是Property Interpolation。
其实可以使用(bottom left, top right)。参见例如stackoverflow.com/a/21011089 和corresponding documentation。
@bmac 请不要用答案编辑您的问题，而是自己创建一个答案并接受，谢谢

标签： less

【解决方案1】：

我认为@seven-phases-max 的 cmets 旨在向您展示创建一个可以使用 (bottom left, top right) 调用的 mixin 可以通过使用 Less 列表函数轻松完成。确实可以在http://lesscss.org/functions/#list-functions找到相应的文档

例如重写你的 mixin 如下：

.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);
}

【讨论】：