Переменные SASS внутри mixin игнорируются

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 + "'";
  }

}

Мой файл Main 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
  }
}