(S)CSS define global color-CodePudding

So I would like to define a global color in my Angular project in the styles.scss stylesheet. I know I can defined global variables like this

:root {
  --blueish: #658bc7;
}

and then in other styles(heets) reference to it

p {
  color: var(--blueish);
}

But this is NOT a globally defined color. This is a globally defined variable. We could for example do

p {
  color: aliceblue;
}

and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?

CodePudding user response：

You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.

SCSS

$blueish: #658bc7;
p {
  color: $blueish;
}

Will compile to CSS:

p {
  color: #658bc7;
}

CodePudding user response：

You Can Define and Assign Variables in scss/sass Like This

$blueish: #658bc7;
p {
  color: $blueish;
}

Notice that in sass/scss files named "blablabla" are globally scope while files named "_blablabla" are not globally scoped and must be imported by.

You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:

/*
  This File is only for imports
*/
@import "./libraries/_variables.scss";
@import "./libraries/_mixins.scss";
@import "./layouts/_header.scss";
@import "./pages/_about.scss";

Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :

@import "./libraries/variables";
@import "./libraries/mixins.scss";
@import "./layouts/_header";

They are the same as the above example!