SASS能否在多个组件中自动重复使用颜色变量

Question

在我的项目中，我有一系列颜色，这些颜色在网站周围的几个地方重复使用，并设置为变量。在HTML中，它们是元素上的一个类。

我有每个组件的SASS文件，所以我的代码中有多个地方，我必须列出不同的颜色变化。当我添加新的颜色选项时，我还需要为多个组件添加一个新颜色块。

有没有一种方法可以实现自动化，只需添加一个新的颜色变量，就可以在每个组件中创建一个新块？那么它就可以工作了，而不必每次都为每个组件创建新的变体？

变量.scs

$red = #f00;
$blue = #0f0;
$green = #f00;

图表.scs

.chart {
&.red { border: 6px solid $red; }
&.green { border: 6px solid $green; }
&.blue { border: 6px solid $blue; }
}

章节.scs

.section {
&.red { background-color: $red; }
&.green { background-color: $green; }
&.blue { background-color: $blue; }
}

图像.scs

.image {
&.red { color: $red; }
&.green { color: $green; }
&.blue { color: $blue; }
}

面板.scs

.panel {
&.red { border-bottom: 5px solid $red; }
&.green { border-bottom: 5px solid $green; }
&.blue { border-bottom: 5px solid $blue; }
}

谢谢！

Answer 1

在变量.css中，您可以添加

@import 'charts';
@import 'section';
@import 'image';
@import 'panel';

Answer 2

@import规则正在逐步从Sass中删除，取而代之的是使用@use相反

我会将variables.scss重命名为settings.scss，并将颜色放置在该文件中，因为它们不是可变的，并且是全局设置。

应该有一个完整的文件将所有Sass编译成一个文件，通常称为Application.scss或styles.scss，但您可以随意调用它。列出要在此文件中编译的所有文件。

所以Applications.sccs看起来像：

@use 'settings';
@use 'charts';
@use 'section';
@use 'image';
@use 'panel'; 

确保具有颜色的settings列在顶部，以确保代码级联到文件流中。