如何在更少的情况下在mixin中获取内部变量？答案

【问题标题】：How to get an inner variable inside a mixin in less?如何在更少的情况下在mixin中获取内部变量？
【发布时间】：2021-07-28 21:40:47
【问题描述】：

我尝试在 mixin 中获取变量，但在使用守卫时它不起作用。我肯定错过了规则中的某些内容。请参考以下代码sn-p。

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

我错过了什么？

【问题讨论】：

标签： css less

【解决方案1】：

您的错误在于假设 & when 构造有点像 if 类似 C 语言的东西。但它不是，& {} 只是一个普通的 CSS 规则集（就像 div {} 一样），& 作为它的选择器，作为一个普通的规则集，它不会将任何内部变量暴露给外部范围。

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

@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)，反之亦然，所以整个事情可以根据实际的sn-p进一步优化。

【讨论】：