Css 如何在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;
}

例如，是否可以只将参数传递给

边框顶部

和

边框底部

因此：

将以下列方式输出：

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

---

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

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

.border all（@border；@border type；@border color；@sides…）{
&非时（@sides=all）{/*如果所有边上都不需要边界*/
.边框边（@index）当（@index>0）{
@边：提取（@sides，@index）；/*提取为每次迭代指定的边*/
border-@{side}:@border@border type@border color；/*创建属性*/
.边界边（@index-1）；
}
.边界边（长度（@sides））；/*循环次数与提供的边数相同*/
}
&当（@sides=all）{/*如果所有边都需要边界*/
边框：@border@border type@border color；/*组合，因为不需要4个单独的属性*/
}
}
.演示{
.边框全部（1px；实心；黑色；顶部，右侧）；
}
D.演示2{
.边框全部（1px；实心；黑色；全部）；
}

---

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

首先，我想问您为什么需要该mixin。它比仅仅

边框更好：3px双@边框颜色

同样的方法，我宁愿使用一个临时变量，例如：

.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以接受另一个参数，该参数可以在调用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;
}