Question

问题：我想为“缺口”创建一个LESS mixin＆＃39;有填充的盒子的角落。

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

此框的右上角和左下角有缺口，其中：在内容正方形之前/之后。

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

类似.boxed-corner（右上角，左下角）;

我的微弱尝试是这样的：

@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也不会使用您输入的字符串（顶部，左侧，右侧，底部）。

我知道我离开了，但可能有办法实现这一目标。有什么想法吗？

编辑：感谢七个阶段 - 最大，这就是我在寻找的东西：

谢谢！就是这样，我只是不知道要搜索什么。我的工作代码现在是：

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

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

Answer 1

我认为@ seven-phases-max的注释打算向您展示创建一个可以用(bottom left, top right)调用的mixin可以很容易地完成对Less list函数的调用。确实可以在http://lesscss.org/functions/#list-functions

找到相应的文档

例如，按如下方式重写mixins：

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

较少：复杂的mixin参数

1 个答案: