是否可以从单个layout-scss页面和多个变量scss表单制作多个css表？

Question

我正在尝试将scss与.net主题功能集成。

理想情况下，大多数scss都在专用目录中，但每个主题都有自己的scss页面，其中只包含该特定主题的变量值。

我遇到的问题是我需要将占位符变量传递给_layout.scss工作表，然后通过主题scss工作表更新其值。目前输出原始的空值。

SCSS文件

---

资源/ SCSS / _variables.scss

$theme_color: null;

资源/ SCSS / _layout.scss

@import "variables";

div {
color: $theme_color;
}

主题/蓝/ blue.scss

$theme_color: #0000ff !default;

@import '../../Resources/SCSS/layout';

主题/红/ red.scss

$theme_color: #ff0000 !default;

@import '../../Resources/SCSS/layout';

所需的CSS输出文件

---

blue.css

div {
color: #0000ff;
}

red.css

div {
color: #ff0000;
}

Answer 1

你倒退了。 !default标志告诉Sass，如果之前的声明不存在，则这是要使用的值。

$foo: red;
$foo: blue !default;

@debug $foo; // red

$bar: red !default;
$bar: blue;

@debug $bar; // blue

您需要将!default标记放在默认的空值上，而不是主题值。