[英]Angular SCSS Global Variable Import
I would like to move over to SCSS in my Angular project. 我想在我的Angular项目中转到SCSS。 So far the only use I want from SCSS is the variables.
到目前为止,我想从SCSS中唯一使用的是变量。 At the moment I have been using CSS variables which work very nicely because you declare them in
:root
in my styles.css and then you can use them in all the components' CSS files in the app. 目前我一直在使用非常好的CSS变量,因为你在我的styles.css中声明了它们
:root
然后你可以在应用程序的所有组件的CSS文件中使用它们。
My question is whether this is possible with SCSS (a global import)? 我的问题是SCSS(全球导入)是否可以实现这一目标? Because I find it very tedious to move from a language that imported globally by it self (CSS) to something that now requires me to import variables wherever I need it (SCSS).
因为我觉得从一种全局导入的语言(CSS)转移到现在需要我在任何需要的地方导入变量(SCSS)的东西都非常繁琐。
I am a bit disappointed on why a better version of something would require me to do this. 我对为什么更好的版本需要我这样做有点失望。 Therefore I am sure there must be some way to not have to import my variables in every SCSS I need them in.
因此,我确信必须有一些方法可以不必在我需要的每个SCSS中导入我的变量。
For example, I want to create variables in my styles.scss, and then I want to be able to use those variables in any of my components' styles, without importing anything. 例如,我想在styles.scss中创建变量,然后我希望能够在我的任何组件样式中使用这些变量,而无需导入任何内容。 In CSS variables like
--MyVar
in :root
is accessible from any components' CSS. 在CSS变量中,例如
--MyVar
in :root
可以从任何组件的CSS访问。
You don't need to import variables everytime consider this example 考虑此示例,您不需要每次都导入变量
theme.scss theme.scss
$primary-color:#00b289;
$secondary-color:#505050;
@import "components/_checkbox";
@import "components/_button";
as you can see I only decalre my variables once and I can use the variables inside my partial sass file. 你可以看到我只对我的变量进行了一次decalre,我可以使用部分sass文件中的变量。
another way is to create a partial sass file include all your variables and imported once 另一种方法是创建一个包含所有变量并导入一次的部分sass文件
theme.scss theme.scss
@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";
I don't think u need to import scss variable everywhere wherever you want to use it 我不认为你需要在任何地方导入scss变量,无论你想在哪里使用它
Suppose you have a file 假设你有一个文件
_variables.scss _variables.scss
$white:#fff;
$black:#000;
then in main.scss
u can import this file 然后在
main.scss
你可以导入这个文件
main.scss main.scss
@import "variables.scss";
Now suppose u want to use these variables in, for eg _button.scss
file 现在假设您想要使用这些变量,例如
_button.scss
文件
_button.scss _button.scss
button{
color:$black
}
You can directly use these variables provide that you import the _button.scss
file in main.scss
file after variable.scss
您可以直接使用这些变量,您可以在
variable.scss
之后导入_button.scss
文件中的main.scss
文件
Placing it after varibles.scss
files will ensure that the variables will be accessible in button.scss
file 之后将其
varibles.scss
文件将确保这两个变量将在访问button.scss
文件
main.scss main.scss
@import "variables.scss";
@import "button.scss";
As for CSS variables, you are free to use them SCSS, 至于CSS变量,你可以自由地使用它们SCSS,
try running the follwing snippet in Sassmeister 尝试在Sassmeister中运行以下片段
:root{
--gridWidth: 45px;
--gridHeight: 45px;
}
.Grid {
width: var(--gridWidth);
height: var(--gridHeight);
border: 1px solid black;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.