css - 如何忽略mixin中的传递参数

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。它比 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;
}

因为我真的看不出在这种情况下使用所有这些多余的逗号和/或分号有什么意义。