Css 如何在较少的时间内获得mixin中的内部变量？

我曾尝试在mixin中获取变量，但在使用防护时它不会起作用。我大胆地忽略了规则中的某些内容。我是less及其功能的新手。有人请告诉我我的错误吗？请参考下面的代码片段

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

我在执行上述代码时遇到了这个错误

如果我去掉了保护条件，我就可以在更少的mixin中获得变量，如下所示

div {
  color: #000000, #cccccc;
}

---

提前感谢。

您的错误在于假设

&当
构造类似于
时，如果
-类似于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);  
}

还要注意，
变暗（somecolor，somevalue）
等于
变亮（somecolor，-somevalue）
，反之亦然，因此整个过程可以根据实际片段进一步优化