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

mixin内部的SASS变量分配被忽略

1 个答案: