LESS настройка переменной внутри mixin

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

После того, как переменная объявлена ​​в пространстве имен или примесь, она как бы становится областью действия или доступна только в пределах только этого пространства имен, и это значение не может быть доступ вне сферы.

Reference from Less Website: Обратите внимание, что переменные, объявленные в пространстве имен будет быть ограничена только этим пространством имен и не будут доступны вне области через тот же синтаксис, который вы будете использовать для ссылки на подмешать (#Namespace > .mixin-name). Так, например, вы не можете сделать следующее: (#Namespace > @this-will-not-work).

Решение 1: Один из вариантов для этого конкретного случая будет использовать неназванный пространство имен (&) и вызовите подмешать в него, как показано ниже:

@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-phase-max] и добавлены в ответ для полноты.

Решение 2: Удаление значения по умолчанию для переменной @nav-color, как сделать код в вопросе работы как есть. Это не должно создавать каких-либо проблем, потому что либо один из условий защиты миксника всегда будет соответствовать, и, следовательно, переменная всегда будет получать назначенное значение.

@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: Совершенно иной подход к решению этой проблемы было бы использовать встроенный в contrast() функции упомянутой seven-phases-max в this answer, чтобы полностью избежать Смешение и установите значения переменных непосредственно на основе легкость или темноту другой переменной.

---

Дополнительная информация: Для иллюстрации точки, ниже будет работать нормально (хотя это не совсем то, что вы после этого), и будет выводить правильный цвет, так как значение для @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; 
    }  
}