Angular SCSS 全局变量导入

Question

我想在我的Angular项目中使用SCSS。目前我只想从SCSS中使用变量。目前我一直在使用CSS变量，因为它们非常好用，你可以在styles.css中声明它们，并且可以在应用程序中的所有组件CSS文件中使用它们。

我的问题是是否有可能在SCSS中实现这一点（全局导入）？因为从一个自动全局导入的语言（CSS）转到现在需要我在需要时导入变量的语言（SCSS），我认为这很繁琐。

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

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

- Paul Kruger

---

我不完全确定我理解了什么，但是Sass有全局变量，你只需要在变量后面添加!global。Sass会编译成CSS，所以我向你保证，在CSS中可能的任何事情在Sass中也同样可能。 - ESR

我所说的全局是跨多个.css文件。!global仅适用于当前.scss文件中的语句。如果我理解有误，请提供官方答案并附上示例，谢谢 :) - Paul Kruger

@PaulKruger 有没有任何答案解决了你的问题？ - Muhammed Albarmavi

抱歉，这个问题发生了很久以前！谢谢你的回答！ - Paul Kruger

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";

- Muhammed Albarmavi

Answer 2

我认为你不需要在每个想要使用它的地方都导入scss变量。

假设你有一个文件

_variables.scss

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

然后在main.scss中，您可以导入此文件。

main.scss

@import "variables.scss";

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

_button.scss

button{
 color:$black
}

如果您在 main.scss 文件中导入 _button.scss 文件，并且在 variable.scss 文件之后，则可以直接使用这些变量。

将其放置在 varibles.scss 文件之后，可确保可以在 button.scss 文件中访问这些变量。

main.scss

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

关于CSS变量，你可以在SCSS中自由使用它们，

尝试在Sassmeister上运行以下代码片段。

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

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

- Gautam Naik

---

这可以实现，但您仍然需要编写导入行。我猜无论您是在main.scss还是在任何其他component.scss中编写导入行，都需要编写一行。因此，我不确定您在这里获得了多少好处。 - Paul Kruger