Angular SCSS全局变量导入

Question

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

我的问题是SCSS(全球导入)是否可行？因为我觉得从一种全局导入的语言(CSS)转移到现在需要我在任何需要的地方导入变量(SCSS)的东西都非常繁琐.

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

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

Answer 1

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

主题.scss

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

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

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

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

主题.scss

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

Answer 2

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

假设你有一个文件

_变量.scss

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

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

主文件

@import "variables.scss";

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

_button.scss

button{
 color:$black
}

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

将其放在文件之后varibles.scss将确保可以在button.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;
}