文章/答案/技术大牛

发布

社区首页 >问答首页 >如何忽略混合中的传递参数

问如何忽略混合中的传递参数
EN

Stack Overflow用户

提问于 2015-06-19 16:15:50

回答 2查看 146关注 0票数 3

我想在项目中使用较少的边框混入，但我经常需要使用边框的不同侧面，而不是全部。

我已经写了一个简单的混音：

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

我可以忽略在混合中向不同的CSS属性传递参数吗？

css

less

less-mixins

回答 2

Stack Overflow用户

发布于 2015-06-19 16:49:01

实际上，您当前的混合不能被修改为仅将参数发送到特定的CSS属性。但是，您可以将mixin修改为类似于下面的代码片段，并将两边作为参数传递。

.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中生成相应的属性。

票数 2

Stack Overflow用户

发布于 2015-06-19 18:16:15

首先，我想问一下你为什么需要这个混音。它比border: 3px double @border-color;更好吗？

同样地，我宁愿使用临时变量，而不是为mixin创建一个非常臃肿和混乱的条件逻辑，例如：

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

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

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

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30933261

复制

相似问题

问如何忽略混合中的传递参数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何忽略混合中的传递参数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何忽略混合中的传递参数
EN