如何在少数变量中仅使用少数变量中的一个变量

Posted 2021-04-01

这是我的mixin

.test(@color:black; @width:100px; @height:50px) {
    width:@width; 
    height:@height; 
    background:@color;
    }

这是以后称之为的地方

 .mydiv {.test('use-mixin-color'; 300px; 150px);}

在使用mixin中定义的颜色时，如何覆盖.mydiv的大小？我试过的一切都超越了mixin的颜色。

答案

要在LESS中使用mixin，请传递这些参数以覆盖mixin默认值：

Soluations;

.test(@color:black; @width:100px; @height:50px) {
    width : @width; 
    height : @height; 
    background : @color;
 }

.mydiv {
    .test(@width : 300px; @height : 150px);
 }

输出：

 .mydiv {
   width: 300px;
   height: 150px;
   background: black;
 }

有帮助:)

另一答案

除了接受的答案。有多种方法（实际上是无限的）但是如果你想让你的mixin最容易使用，你可以为特定的参数值或参数数量提供"specialization"。像这样例如：

// usage:

.foo {.test(red, 1px, 2px)}
.bar {.test(3px, 4px)}

// impl.:

.test(@color, @width, @height) {
    width: @width; 
    height: @height; 
    background: @color;
}

.test(@width, @height) { // <- "no color" specialization
    .test(black, @width, @height);
}

Demo。

---

在为mixin添加默认参数值之前，请三思而后行：

.test(@color: black, @width: 100px, @height: 50px) { ...

除了一些特定的用例之外，人们倾向于过度使用此功能，而它几乎不需要（并且只会产生额外的代码噪声）。即考虑一下你是否真的希望你的mixin被调用为：

test;
test(blue, 4em);
// etc.

你呢？通常一个好主意是从没有默认参数值开始（至少保护mixin免受意外误用），即：

.test(@color, @width, @height) { ...

并在以后只在需要的地方和时间添加它们。