Angular SCSS全局变量导入-Java 学习之路

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

我的问题是SCSS（全球导入）是否可以实现这一目标？因为我发现从一个全自动导入的语言（CSS）转移到现在需要我在任何需要的地方导入变量（SCSS）的东西都非常繁琐 .

我对为什么更好的版本需要我这样做感到有些失望 . 因此，我确信必须有一些方法可以不必在我需要的每个SCSS中导入我的变量 .

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

2 回答

1
我不认为你需要在任何地方导入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 文件 after 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;
}
```
回复于 2024-04-25T22:04:33+08:00
0
考虑此示例，您不需要每次都导入变量

theme.scss
```
$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";
```
正如你所看到的，我只对我的变量进行了一次decalre，我可以使用部分sass文件中的变量 .

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

theme.scss
```
@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";
```
回复于 2024-04-25T22:04:33+08:00

Angular SCSS全局变量导入

2 回答

相关问题