18

I would like to move over to SCSS in my Angular project. So far the only use I want from SCSS is the variables. 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.

My question is whether this is possible with SCSS (a global import)? 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).

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.

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. In CSS variables like --MyVar in :root is accessible from any components' CSS.

Paul Kruger
  • 2,094
  • 7
  • 22
  • 49
  • Not fully sure I understand but Sass has global variables, you just need to append `!global` to your variable. Sass will compile to CSS, so I assure you anything that is possible in CSS is also possible in Sass. – ESR Aug 14 '18 at 06:11
  • By global I mean across multiple .css files. `!global` is only a statement that applies to the current .scss file it is in. If I understand it wrong, please add an official answer with an example if you don't mind :) – Paul Kruger Aug 14 '18 at 07:22
  • @PaulKruger have any of the answers solve your problem ? – Muhammed Albarmavi Jul 01 '19 at 19:37
  • Yes sorry. This was such a long time ago! Thank you for your answer! – Paul Kruger Jul 01 '19 at 19:42

2 Answers2

9

You don't need to import variables everytime consider this example

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.

another way is to create a partial sass file include all your variables and imported once

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";
Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
5

I don't think u need to import scss variable everywhere wherever you want to use it

Suppose you have a file

_variables.scss

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

then in main.scss u can import this file

main.scss

@import "variables.scss";

Now suppose u want to use these variables in, for eg _button.scss file

_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

Placing it after varibles.scss files will ensure that the variables will be accessible in button.scss file

main.scss

@import "variables.scss";
@import "button.scss";

As for CSS variables, you are free to use them SCSS,

try running the follwing snippet in Sassmeister

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

.Grid {
    width: var(--gridWidth);
    height: var(--gridHeight);
    border: 1px solid black;
}
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
  • 4
    This works but you are still writing the import line. I guess whether you write an import line in main.scss or in any other component.scss it is still writing one line. So I am not sure if you are winning much here. – Paul Kruger Aug 21 '18 at 12:58