css - 如何在 less 中获取 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 构造有点像类 C 语言的 if。但事实并非如此，& {} 只是一个普通的 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) 反之亦然，所以整个事情可以进一步优化取决于在实际片段上。