是否可以从单个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'; 

欲望d 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标志置于默认空值上，而不是主题值。