98

I do already have SCSS variables defined in src/styles/settings/_variables.scss and I am importing them into src/styles.scss, but still these variables aren't available for every single component.

Is there any way to make a global file which holds all SCSS variables for the rest of my components? Because writing @import in every single component .scss file it is very frustrating, especially if I have many nested components.

I know, there is a lot of similar questions, but it seems like they're all outdated and do not relate to the recent versions of Angular.

I use Angular 7.3 with CLI.

devDan
  • 5,969
  • 3
  • 21
  • 40
Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70

7 Answers7

60

You just need to add a little more config, so where you are declaring your global variables, you need to wrap it up in :root{}. So in src/styles/settings/_variables.scss.

:root {
  --blue: #00b; // or any global you wish to share with components 
}

Then when you use them in the SCSS you will need to access them like so.

.example-class {
  background-color: var(--blue)
}

To add to this regarding comments, this method can use mixins, @media and keyframes and is not limited to just colours / font. That was an example.

From my understanding you need a global file src/assets/style/global and then to import each scss file into there where you are defining them like so.

@import 'filename';

If you dont want global variables to be used in within a component look when you have the globals working. Look into ViewEncapsulation, as this can be used to ignore them.

devDan
  • 5,969
  • 3
  • 21
  • 40
  • I am using same way but do you know how to use defined variable in css like box-shadow ? – Javascript Hupp Technologies Mar 13 '19 at 05:51
  • 1
    Yes, native css variables is pretty good already, but this is not only about colors and font-size, but some mixins and functions also. – Volodymyr Humeniuk Mar 13 '19 at 08:46
  • try removing the root:{} if you have no luck with the above edit. – devDan Mar 13 '19 at 09:14
  • wow this worked. Where is this in the sass documentation? Wonder what are its implications... – Gel Apr 08 '20 at 18:21
  • so if i were to use this variable in my @mixin within the same global scss file wrapped in :root {} how would that work? will this be recognized by all the other components like it recognized the variable? – Gel Apr 08 '20 at 18:28
  • 3
    This doesn't address the problem. This is using CSS `custom-properties` not SCSS variables. – Ahmad Alfy Oct 14 '21 at 11:50
41

Is there any ways to make global file with scss variables available for all components?

Without importing global file everytime in each component, you want those sass variables been available, it's not possible.

The way it works in SASS, if using partials to better organize code, you can apply @import directive for referencing. So if there're some sass variables in shared/_variables.scss:

$lightslategray: #778899;
$darkgray: #A9A9A9;

and these variables need to be used in another stylesheet, stylesheet with them must be @import-ed into it firstly:

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

In Angular it works in a similar way (related referencing external stylesheet). So if you need some sass variables, mixins or functions to be used by a particular component.scss, there is no other clean way, but to reference them in that component.scss using @import directive. To ease the task, you can create a file src/_variables.scss and use syntax like this in your component.scss:

@import “~variables.scss”;
Vadi
  • 3,279
  • 2
  • 13
  • 30
14

Easily possibe to access sass style(s) from a global file with two steps.

  1. Add folder path of the style files to includePaths array in angular.json file.
  2. Import style file by file-name in any component.

let say your files and folder structures is as follows: src > my-styles-folder > var.scss

angular.json

"architect": {
  "build": {
    ...
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/my-styles-folder" // add path only, do not include file name
        ]
      },
      "styles": [
        ...
      ]
    }
    ...
  }
}

var.scss

$toolbar-heigh: 70px;

some-component.scss

@import "var"; // var.scss

mat-toolbar {
  height: $toolbar-height;
}
WasiF
  • 26,101
  • 16
  • 120
  • 128
12

step one : go to custom scss file (shared/css/_variable.scss) and write this part

:root{
  --color-text: red;
  --color-btn-success: green;
}

after go to style.scss (this is main file) and import this file :

@import './shared/css/Variables';

now you can use variables in all components with this Syntax:

.sample{
  color : var(--color-text);
}
Hossein Rahmian
  • 121
  • 1
  • 3
  • you actually dont need to create a separate css file to import by just putting them in your styles.scss/css thus reducing your need to import a separate file into each components scss/css file. – Austin Born Jun 01 '23 at 18:42
2

In angular 8 work for me.

In your _variable.scss file you have to add:

:root{--my-var:#fabada}

After that go in your angular.json and add this in "styles": 

{"input":"yourPath/_variables.scss"}
lauren
  • 29
  • 3
0

In each angular component you can use variables from files:

@use "/src/styles/settings/variables" as *;

after your variables will be available in your component, I hope it's help to you

Constantine
  • 1
0

You can just use :root{--my-var:#fabada} in your styles.scss/css and get rid of the extra _variables file. Then just use var(--my-var) in any component.

Austin Born
  • 1,339
  • 2
  • 11
  • 22