Angular SCSS 全局变量导入

Posted 2023-03-06

【中文标题】Angular SCSS 全局变量导入

【英文标题】：Angular SCSS Global Variable Import

【发布时间】：2019-01-20 21:37:46

【问题描述】：

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

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

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

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

【问题讨论】：

不完全确定我理解但 Sass 有全局变量，你只需要将 !global 附加到你的变量。 Sass 会编译成 CSS，所以我向你保证，任何在 CSS 中可能的东西在 Sass 中也是可能的。

全局是指跨多个 .css 文件。 !global 只是一个适用于它所在的当前 .scss 文件的声明。如果我理解错了，如果你不介意，请添加一个带有示例的官方答案:)

@PaulKruger 有任何答案可以解决您的问题吗？？？？？？ ?

是的，抱歉。这是很久以前的事了！谢谢你的回答！

【参考方案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";

【参考方案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;

【讨论】：

这可行，但您仍在编写导入行。我猜你是在 main.scss 还是在任何其他 component.scss 中编写导入行，它仍然是一行。所以我不确定你是否在这里赢了很多。