Mixin内部的LESS设置变量 [英] LESS setting variable inside mixin

问题描述

为什么不设置@ nav-color ...?

Why is @nav-color not getting set...?

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

推荐答案

一旦在名称空间或mixin中声明了变量，则该变量只能在该名称空间中限定作用域或可访问，并且其值不能在外部访问.范围.

Once a variable is declared within a namespace or a mixin, it kind of becomes scoped or accessible only within that namespace only and it's value cannot be access outside of the scope.

Less网站的引用: 注意，在命名空间中声明的变量将仅作用于该命名空间，并且将无法通过与引用混合(#Namespace > .mixin-name)相同的语法在作用域之外使用.因此，例如，您不能执行以下操作:(#Namespace > @this-will-not-work).

Reference from Less Website: Note that variables declared within a namespace will be scoped to that namespace only and will not be available outside of the scope via the same syntax that you would use to reference a mixin (#Namespace > .mixin-name). So, for example, you can't do the following: (#Namespace > @this-will-not-work).

解决方案1: 对于这种特殊情况，选项之一是使用未命名的命名空间(&)并在其中调用mixin，如下所示:

Solution 1: One of the options for this particular case would be to use an unnamed namespace (&) and call the mixin within it like below:

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

---

以下所有选项均由[seven-phases-max]的评论提供，并出于完整性的考虑而添加到答案中.

All the following options are courtesy of [seven-phases-max]'s comment and are added to the answer for completeness sake.

解决方案2:删除@nav-color变量的默认值似乎可以使有问题的代码按原样工作.这不会造成任何问题，因为.theme() mixin的保护条件之一始终会匹配，因此该变量将始终获得分配的值.

Solution 2: Removing the default value for the @nav-color variable seems to make the code in question work as-is. This should not create any issues because either one of the .theme() mixin's guard conditions would always be matched and hence the variable would always get a value assigned.

@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- 此答案中的最大避免混入并直接根据另一个变量的明暗设置变量值.

Solution 3: A completely different approach to solve this problem would be to use the built-in contrast() function mentioned by seven-phases-max in this answer to totally avoid the mixin and set the variable values directly based on the lightness or darkness of another variable.

其他信息: 为了进一步说明这一点，下面的命令可以很好地工作(尽管不完全是您所追求的)，并且会输出正确的颜色，因为@nav-color的值在其范围内设置.

Additional Information: To further illustrate the point, the below would work fine (though it is not exactly what you are after) and would output the correct color because the value for the @nav-color is set within its scope.

.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内部的LESS设置变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！