SASS 可以跨多个组件自动重用颜色变量吗？

Question

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

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

有没有办法自动执行此操作，只需添加一个新的颜色变量，就可以在每个组件中创建一个新块？所以它可以正常工作，而不必每次都为每个组件创建新的变体？

variables.scss

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

charts.scss

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

section.scss

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

image.scss

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

panel.scss

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

谢谢！

Answer 1

在你的 variables.css 你可以添加

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

Answer 2

@import 规则是 Sass 的 being phased out，取而代之的是 @use 而是。

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

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

所以Applications.sccs 看起来像：

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

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