Question

为什么@ 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();

Answer 1

一旦变量在命名空间或mixin中声明，它只会在该命名空间内变为范围或可访问，并且它的值不能在范围之外访问。

Reference from Less Website:请注意，在命名空间内声明的变量将仅作用于该命名空间，并且不会通过与用于引用mixin（#Namespace > .mixin-name）相同的语法在范围之外可用。因此，例如，您无法执行以下操作：（#Namespace > @this-will-not-work）。

解决方案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;
    }
}

所有以下选项都是[七阶段 - 最大]评论的礼貌，并且为了完整起见而添加到答案中。

解决方案2：删除@nav-color变量的默认值似乎会使相关代码按原样运行。这不应该产生任何问题，因为.theme() mixin的保护条件中的任何一个总是匹配，因此变量总是会得到一个值。

@light: #f5f5f5;
@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;
}

解决方案3： 解决此问题的一种完全不同的方法是使用seven-phases-max中this answer提到的内置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;
    }       
}

在mixin中设置变量较少

1 个答案: