Angular SCSS 全局变量导入

Question

我想在我的 Angular 项目中转移到 SCSS。到目前为止，我想从 SCSS 获得的唯一用途是变量。目前我一直在使用 CSS 变量，它们工作得非常好，因为你在我的 styles.css 中的 :root 中声明它们，然后你可以在应用程序的所有组件的 CSS 文件中使用它们。

我的问题是这是否可以通过 SCSS（全局导入）实现？因为我发现从一种由它自己全局导入的语言 (CSS) 转变为现在需要我在需要的地方导入变量的语言 (SCSS) 非常乏味。

我有点失望，为什么一个更好的版本需要我这样做。因此，我确信必须有某种方法不必在我需要它们的每个 SCSS 中导入我的变量。

例如，我想在我的 styles.scss 中创建变量，然后我希望能够在我的任何组件样式中使用这些变量，而无需导入任何内容。在 :root 中的 --MyVar 等 CSS 变量可以从任何组件的 CSS 访问。

Answer 1

你不需要每次考虑这个例子都导入变量

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

如您所见，我只对变量进行了一次标记，并且可以在部分 sass 文件中使用变量。

另一种方法是创建一个包含所有变量并导入一次的部分 sass 文件

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";

Answer 2

我认为你不需要在任何你想使用它的地方导入 scss 变量

假设你有一个文件

_variables.scss

$white:#fff;
$black:#000;

然后在main.scss你可以导入这个文件

main.scss

@import "variables.scss";

现在假设你想在例如_button.scss 文件中使用这些变量

_button.scss

button{
 color:$black
}

您可以直接使用这些变量，前提是您将_button.scss文件导入main.scss文件之后 variable.scss

将它放在varibles.scss 文件之后将确保变量可以在button.scss 文件中访问

main.scss

@import "variables.scss";
@import "button.scss";

至于CSS变量，你可以随意使用SCSS，

尝试在Sassmeister 中运行以下 sn-p

:root{
  --gridWidth: 45px; 
  --gridHeight: 45px; 
}

.Grid {
    width: var(--gridWidth);
    height: var(--gridHeight);
    border: 1px solid black;
}