---

Question

我想在项目中使用Less mixin作为边框，但我经常需要使用边框的不同边，而不是全部。

我写了一个简单的mixin：

.border-all (@border; @border-type; @border-color) {
  border-top: @border @border-type @border-color;
  border-right: @border @border-type @border-color;
  border-bottom: @border @border-type @border-color;
  border-left: @border @border-type @border-color;
}

例如，是否可以仅将参数传递给border-top和border-bottom？

所以：

.class {
  .border-all (3px; double; @border-color);
}

输出：

.class {
  border-top: 3px double #333;
  border-bottom: 3px double #333;
}

我可以忽略在mixin中将传递参数传递给不同的CSS属性吗？

Answer 1

实际上，无法修改当前的mixin以仅将参数发送到特定的CSS属性。但是，您可以将mixin修改为与下面的代码段类似，并将side作为参数传递。

.border-all (@border; @border-type; @border-color; @sides...) {
    & when not (@sides = all){ /* if border is not needed on all sides */
        .border-side(@index) when (@index > 0){
            @side: extract(@sides, @index); /* extract the side specified for each iteration */
            border-@{side}: @border @border-type @border-color; /* create property */
            .border-side(@index - 1);
        }
        .border-side(length(@sides)); /* loop as many times as the no. of sides provided */
    }
    & when (@sides = all){ /* if border is needed for all sides */
        border: @border @border-type @border-color; /* combined because there is no need for 4 separate properties. */
    }
}

.demo{
    .border-all(1px; solid; black; top, right);
}
.demo2{
    .border-all(1px; solid; black; all);
}

您只需要将所需的边作为mixin的最后一个参数传递，并且只在输出CSS中生成相应的属性。

Answer 2

首先，我会问你为什么需要mixin。它如何比border: 3px double @border-color;更好？

同样的方法，而不是为mixin制作一个非常膨胀和令人困惑的条件逻辑，我宁愿坚持使用临时变量，例如：

.class {
   @border: 3px double @border-color;
    border-top: @border;
    border-bottom: @border;
}

是的，它是三行代码而不是一行，但毫无疑问它更容易维护。

---

无论哪种方式，如果我必须使用这样的mixin，我可能会将其简化为：

// usage:

.c1 {
    .border(top right, 1px solid black);
}

.c2 {
    .border(1px solid black);
}

// impl:

.border(@sides, @value) {
    .side(length(@sides));
    .side(@i) when (@i > 0) {
        @side: extract(@sides, @i);
        border-@{side}: @value;
        .side(@i - 1);
    }
}

.border(@value) {
    border: @value;
}

在这种情况下，我真的无法看到使用所有冗余逗号和/或分号的任何意义。

如何忽略mixin中的传递参数

2 个答案:

---