如何在Stylus中定义变量组？能否切换变量组实现主题切换？

嘿，我懂你碰到的问题了——你用混合宏（mixin）来定义主题变量但没生效，这是因为Stylus里mixin内部的变量是局部作用域的，外部代码根本访问不到这些变量。下面给你几个实用的解决方案，不管是预编译时静态切换，还是前端动态切换主题都能搞定：

方案1：预编译时静态切换主题（适合固定主题场景） #

如果你的主题是编译前就确定好的，不需要用户在浏览器里切换，可以用全局变量+条件判断来赋值：

// 先定义基础色值
$my-blue = #1876d3
$my-white = #f6f6f6

// 选择要使用的主题：'blue-on-white' 或 'white-on-blue'
$theme = 'blue-on-white'

// 根据主题赋值全局变量
if $theme == 'blue-on-white'
  $primary-color = $my-blue
  $secondary-color = $my-white
else if $theme == 'white-on-blue'
  $primary-color = $my-white
  $secondary-color = $my-blue

// 接下来就可以全局使用这些变量了
body
  background: $secondary-color
  color: $primary-color

.btn
  background: $primary-color
  color: $secondary-color

只需要修改$theme的值，重新编译就能得到对应主题的CSS，简单直接。

方案2：运行时动态切换主题（适合前端交互切换） #

如果需要用户在浏览器里随时切换主题，就用CSS类名包裹主题变量，通过切换根元素的类来生效：

// 定义基础色值
$my-blue = #1876d3
$my-white = #f6f6f6

// 主题1：白底蓝字
.theme-blue-on-white
  $primary = $my-blue
  $secondary = $my-white
  body
    background: $secondary
    color: $primary
  .btn
    background: $primary
    color: $secondary

// 主题2：蓝底白字
.theme-white-on-blue
  $primary = $my-white
  $secondary = $my-blue
  body
    background: $secondary
    color: $primary
  .btn
    background: $primary
    color: $secondary

编译后，你只需要在HTML的根元素（比如<html>或<body>）上添加对应的类名，比如<body class="theme-blue-on-white">，就能切换主题。如果样式很多，建议把公共样式抽出来，只把主题相关的属性放在主题类里，减少代码冗余。

方案3：拆分主题文件（适合复杂主题场景） #

如果主题配置比较复杂，可以把每个主题的变量单独写成一个文件，通过条件判断导入：

// themes/blue-on-white.styl
$primary-color = #1876d3
$secondary-color = #f6f6f6

// themes/white-on-blue.styl
$primary-color = #f6f6f6
$secondary-color = #1876d3

// 主文件 main.styl
$theme = 'blue-on-white'

// 根据主题导入对应的变量文件
if $theme == 'blue-on-white'
  @import 'themes/blue-on-white'
else
  @import 'themes/white-on-blue'

// 使用变量
body
  background: $secondary-color
  color: $primary-color

这种方式能让主题配置更清晰，方便后期维护。

最后再提一句：你之前用mixin的思路没问题，但Stylus的mixin内部变量是局部的，执行完就销毁了，外部根本拿不到，所以才会没效果。上面的方案都是把变量放到全局作用域或者通过类名限定作用域，就能正常使用啦。

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