Question

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

我的问题是，使用SCSS（全局导入）是否可以做到这一点？因为我发现从一种由其自身全局导入的语言（CSS）过渡到现在需要我在需要的任何位置（SCSS）导入变量的工作非常繁琐。

对于为什么需要更好的版本，我有些失望。因此，我确信必须有某种方法不必在需要使用的每个SCSS中导入变量。

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

Answer 1

我认为您不需要在任何要使用它的地方都导入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中运行以下代码段

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

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

Answer 2

您不必每次考虑此示例时都导入变量

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

Angular SCSS全局变量导入

2 个答案: