Less mixin内设置变量较少

为什么@nav color没有设置

@light: #f5f5f5;
@nav-color: #0ff;
@headerbar: #333;  
@dark: #222;
@light: #f5f5f5;

.theme() when (lightness(@headerbar) > 50%) {
    @nav-color: @dark;
}
.theme() when (lightness(@headerbar) <= 50%) {
    @nav-color: @light;
}
.theme();

@light:#f5；
@导航颜色：#0ff；
@校长：333；
@深色：#222；
@灯光：#f5；
.theme（）当（亮度（@headerbar）>50%）{
@导航颜色：@暗；
}
.theme（）当（lightness（@headerbar）在命名空间或mixin中声明变量时，它的作用域将变为只能在该命名空间内访问，并且其值不能在作用域之外访问

请注意，在命名空间内声明的变量将仅作用于该命名空间，并且不会通过用于引用mixin（
#namespace>.mixin name
）的相同语法在该范围外可用。因此，例如，您不能执行以下操作：（
#namespace>@这将不起作用
）

解决方案1:
此特定情况下的一个选项是使用未命名的命名空间（
&
），并在其中调用mixin，如下所示：

@light: #f5f5f5;
@nav-color: #0ff;
@headerbar: #333;  
@dark: #222;
@light: #f5f5f5;

.theme() when (lightness(@headerbar) > 50%) {
    @nav-color: @dark;
}
.theme() when (lightness(@headerbar) <= 50%) {
    @nav-color: @light;
}

&{
    .theme();
    div#sample1{
        color: @nav-color;
    }

    div#sample2{
        background-color: @nav-color;
    }
}

解决方案3:
解决此问题的一种完全不同的方法是使用in中提到的内置
contrast（）
函数，以完全避免混入，并直接根据另一个变量的亮度或黑暗度设置变量值


其他信息：
为了进一步说明这一点，下面的代码可以很好地工作（尽管它并不完全是您想要的），并且可以输出正确的颜色，因为
@nav color
的值是在其范围内设置的

.theme() when (lightness(@headerbar) > 50%) {
    @nav-color: @dark;
    div#sample3{
        border-color: @nav-color;
    }    
}
.theme() when (lightness(@headerbar) <= 50%) {
    @nav-color: @light;
    div#sample3{
        border-color: @nav-color;
    }       
}

.theme（）当（亮度（@headerbar）>50%）{
@导航颜色：@暗；
分区#样本3{
边框颜色：@导航颜色；
}    
}
.theme（）when（lightness（@headerbar）如果在选择器块中调用mixin，然后使用变量mate，那么应该可以使用。除了下面@Harry的答案之外，我还需要在不同的位置全局使用变量。除了各种解决方法之外（您也可以删除默认的
@nav color:#0ff；
或将其放入另一个
.theme（）
定义）在这种特殊情况下，您需要注意函数（换句话说，您根本不需要这种混合）。@seven Phase max:我已经根据您对我的答案的评论添加了示例（为了完整性起见）伙计。如果你想添加一个单独的答案，一定要告诉我，我会把它们删除。顺便说一句，我很好奇删除
@nav color:#0ff；
是如何让它工作的。有一个简短的答案吗？如果没有，我可能会为它创建一个单独的问题。所有这些都是非常有趣的技术。我只需要将@nav color设置在e全局名称空间。不制作CSS。就像我的问题中所说的。所以仍然在寻找最好的方法。
.theme() when (lightness(@headerbar) > 50%) {
    @nav-color: @dark;
    div#sample3{
        border-color: @nav-color;
    }    
}
.theme() when (lightness(@headerbar) <= 50%) {
    @nav-color: @light;
    div#sample3{
        border-color: @nav-color;
    }       
}