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

Question

我想做一个动态的 SASS 主题切换器，所以我做了一些 research :

$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
  }
}