通过引用分配SASS

通过引用分配SASS,sass,Sass,我正在构建一个系统,采用默认样式表,并与一个主题和一个基本主题合并,以生成最终的站点css,但是我希望找到一种方法,通过引用而不是通过值来分配变量,这样我就可以做类似的事情 base.vars.scss $PrimaryFg: blue $LinkFg: $PrimaryFg $DefaultFont: opensans $HeadingFont: $DefaultFont $PrimaryFg: yellow $CaptionFont: $HeadingFont $DefaultFont:

我正在构建一个系统,采用默认样式表,并与一个主题和一个基本主题合并,以生成最终的站点css,但是我希望找到一种方法,通过引用而不是通过值来分配变量,这样我就可以做类似的事情

base.vars.scss

$PrimaryFg: blue
$LinkFg: $PrimaryFg
$DefaultFont: opensans
$HeadingFont: $DefaultFont
$PrimaryFg: yellow
$CaptionFont: $HeadingFont
$DefaultFont: Verdana
basetheme.vars.scss

$PrimaryFg: blue
$LinkFg: $PrimaryFg
$DefaultFont: opensans
$HeadingFont: $DefaultFont
$PrimaryFg: yellow
$CaptionFont: $HeadingFont
$DefaultFont: Verdana
theme.vars.scss

$PrimaryFg: blue
$LinkFg: $PrimaryFg
$DefaultFont: opensans
$HeadingFont: $DefaultFont
$PrimaryFg: yellow
$CaptionFont: $HeadingFont
$DefaultFont: Verdana
base.rules.scss

body {font: $DefaultFont }
h1,h2,h3,h4,h5,h6 {font: $HeadingFont; }
a {color: $LinkFg }
caption {font: $CaptionFont; }
basetheme.rules.scss

body {font: $DefaultFont }
h1,h2,h3,h4,h5,h6 {font: $HeadingFont; }
a {color: $LinkFg }
caption {font: $CaptionFont; }
theme.rules.scss

@import 'base.vars.scss';
@import 'basetheme.vars.scss';
@import 'theme.vars.scss';
@import 'base.rules.scss';
@import 'basetheme.rules.scss';
我遇到的主要问题是,$HeadingFont将设置为opensans,并且不会更改为Verdana,并且链接FG颜色仍然是蓝色

我找不到解决方案,我希望$HeadingFont:$DefaultFont不会立即赋值,而是赋值变量,以便以后可以更改


是的,我知道!默认情况下,但它是一个完整的混乱试图这样做!默认值。

变量占位符
$xxx
只需在编译时替换字符串即可。CSS不是一种可以通过引用传递信息的语言,它是所有文本和数字值。如果您希望事物是可重写的,那么它们必须是文本和数字值。像Bootstrap和Buffic这样的框架遵循这个方法。使用<代码>有什么问题!默认值?这就是此功能背后的意图,因此如果它成为一个问题,您可能会错误地使用它。在上面的示例中使用默认值会导致一个巨大的混乱,我如何在主题库中基于LinkFg的颜色,同时在实际主题中覆盖PrimaryFG,然后也是LinkFg,等等。最好是有一个操作符,它现在不复制变量的值,而是等到所有文件都处理完毕后再复制该值。例如
$LinkFg:$PrimaryFg!晚或类似的东西。