0

为什么我不能根据类更改 scss 变量？我希望在课堂暗模式下变量为绿色。

CSS：

$test: red;

@mixin darkTheme {
  $test: green;
}

.theme-dark {
  @include darkTheme();

  .test {
    background-color: $test;
  }
}

html:

<body class="dark-mode">
  <div class="test">test</div>
</body>

我该如何做到这一点？我不想要的是 2 个变量。

4

1 回答 1

3

这是因为可变作用域。

在 Sass 中，在 mixin 或函数之外声明的所有变量都将具有全局范围，并且可以在任何使用该变量的 Sass 选择器中引用。（来源）

这意味着在 mixin 或函数内设置的任何变量值仅在该 mixin 或函数内可用，即使该变量先前是全局设置的。

在不同的 Sass 变量集之间切换

偏音

您可以为每个主题创建一个部分文件，并在每个主题的父类下导入这些文件。

_theme-dark.scss 
$background-color: #000;
$text-color: #fff;
_theme-light.scss 
$background-color: #fff;
$text-color: #000;
_themed-page.scss 
body {
    background: $background-color;
    color: $text-color;
}
主题样式.scss 
.theme-dark {
    @import "theme-dark";
    @import "themed-page";
}

.theme-light {
    @import "theme-light";
    @import "themed-page";
}

地图

另一种选择是将主题值存储在地图中并具有实用功能来检索所需的值。（来源）

_theme-variables.scss 
$theme: 'default';

$theme-values: ( 
    'background-color': ( 
        'default': #eee,
        'light': #fff,
        'dark': #000
    ),
    'text-color': ( 
        'default': #333,
        'light': #000,
        'dark': #fff
    )
);

@function theme-value($key) {
    $map: map-get($theme-values, $key);
    @return map-get($map, $theme);
}
_themed-page.scss 
body {
    background: theme-value('background-color');
    color: theme-value('text-color');
}
主题样式.scss 
.theme-dark {
    $theme: 'dark';
    @import "themed-page";
}

.theme-light {
    $theme: 'light';
    @import "themed-page";
}
于 2018-11-02T00:34:39.517 回答