如何在mixin中获取内部变量？

Question

我试图在mixin中获取变量，并且在使用警卫时不会起作用。我挑衅地错过了规则中的一些东西。我是一个新学习者，它的功能较少。任何一个请让我知道我的错误？请参阅以下代码段。

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient; // here I need the output
}

.custom-colors(@value, @light, @dark, @lightdark){   
    & when (@lightdark = true){
        @gradient: lighten(extract(@value, 1), @light), darken(extract(@value, 2), @dark);
    }    
    & when (@lightdark = false){
        @gradient:  darken(extract(@value, 1), @dark), lighten(extract(@value, 2), @light);
    }   
}

执行上述代码时出现此错误

如果我删除了保护条件，我可以将变量放在less mixin中，如下所示。

div {
  color: #000000, #cccccc;
}

提前致谢。

Answer 1

你的错误在于假设& when构造类似于if - 就像C语言一样。但事实并非如此，& {}只是一个简单的CSS规则集（就像div {}一样），&作为其选择器，而作为一个普通的规则集，它不会将任何内部变量暴露给外部作用域。

调用时只有mixins将其内部暴露给外部作用域，因此实现所需的方法之一是：

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient;
}

.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = true) {
    @gradient: lighten(extract(@value, 1), @light), 
                darken(extract(@value, 2), @dark);
}    
.custom-colors(@value, @light, @dark, @lightdark) when (@lightdark = false) {
    @gradient:  darken(extract(@value, 1), @dark), 
               lighten(extract(@value, 2), @light);
}

可以进一步简化为：

@list: #000, #fff;
div {
  .custom-colors(@list, 0%, 20%, true);   
   color: @gradient;
}

.custom-colors(@value, @light, @dark, true) {
    @gradient: lighten(extract(@value, 1), @light),         
                darken(extract(@value, 2), @dark);
}    
.custom-colors(@value, @light, @dark, false) {
    @gradient:  darken(extract(@value, 1), @dark),  
               lighten(extract(@value, 2), @light);  
}

另请注意，darken(somecolor, somevalue)等于lighten(somecolor, -somevalue)，反之亦然，因此可以根据实际摘要进一步优化整个内容。