html - 忽略 mixin 中的 SASS 变量赋值

Question

我想制作一个动态的 SASS 主题切换器，所以经过一些研究后我这样做了：

$valueName: ("ui_main");
$valueLight: (yellow);
$valueDark: (grey);

$currentTheme: "";

@mixin theme() {

  $currentTheme: "light";
  .light & {
    @content
  }

  $currentTheme: "dark";
  .dark & {
    @content
  }

}

@function getValue($name) {

  $index: index($valueName, $name);

  @if ($index == false) {
    @error $valueName + " has not been defined";
  }

  @if ($currentTheme == "light") {

    @return nth($valueLight, $index);

  } @else if ($currentTheme == "dark") {

    @return nth($valueLight, $index);

  } @else {
    @error "Invalid Theme: '" + $currentTheme + "'";
  }

}

我的主要 SASS 文件如下所示：

@import "themer"

div
  @include theme
    background: getValue("ui_main")

但是变量$currentTheme不会改变。控制台给了我自己的错误：

cmd.exe /D /C call C:\Ruby24-x64\bin\sass.bat --no-cache --update theme.sass:theme.css
      error themer.scss (Line 38: Invalid Theme: '')

Answer 1

!global从局部范围修改全局变量时应该使用修饰符：

@mixin theme() {
  $currentTheme: "light" !global;
  .light & {
    @content
  }

  $currentTheme: "dark" !global;
  .dark & {
    @content
  }
}