Stylus定义明暗主题混合宏时else条件被忽略失效如何解决

你代码的问题来源于Stylus的变量作用域规则：未声明为局部的变量默认是全局变量，同时Stylus的mixin采用静态作用域逻辑，变量会优先查找mixin定义位置的作用域值，而非调用位置的临时赋值，因此你在两个主题块中对theme-is-bright、theme-is-dark的赋值要么被后定义的.theme-dark块覆盖，要么无法被mixin读取到，最终两个主题的条件判断统一使用了同一组值，导致输出的变量值一致。

修复方案1：通过参数传递主题标识（最稳妥，无作用域依赖） #

直接把主题判断标识作为参数传递给mixin，完全避免全局变量的干扰，修改后代码如下：

insert-Variable(Name, Value-bright, Value-dark, isBright)
  if isBright
    --color-{Name}: Value-bright
  else
    --color-{Name}: Value-dark

Variables(isBright)
  insert-Variable(Element1, black, white, isBright)
  insert-Variable(Element2, black, white, isBright)
  insert-Variable(Element3, black, white, isBright)

.theme-bright
  Variables(true)

.theme-dark
  Variables(false)

修复方案2：用local声明块级局部变量 #

如果你不想调整现有mixin的参数定义，可以用local关键字将主题标识声明为当前块的局部变量，让调用mixin时可以正确读取到当前块的变量值：

insert-Variable(Name, Value-bright, Value-dark)
  if theme-is-bright
    --color-{Name}: Value-bright
  else if theme-is-dark
    --color-{Name}: Value-dark

Variables()
  insert-Variable(Element1, black, white)
  insert-Variable(Element2, black, white)
  insert-Variable(Element3, black, white)

.theme-bright
  local theme-is-dark = false
  local theme-is-bright = true
  Variables()

.theme-dark
  local theme-is-bright = false
  local theme-is-dark = true
  Variables()

两种方案都可以输出你预期的结果。

内容的提问来源于stack exchange，提问作者Miranda N