How to use variable.scss $color in scss file


by default the ionic had provide the following color
$colors: (
primary: #EF5A28,
secondary: #f5911e,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B,
darkgraycustom: #333333,
lightgraycustom : #b2b2b2

this is easy for use when we are directly bind to DOM using color=“primary”, but if i want to use in my .scss file then how to i access the color in this list?
for example if i want my border to be the primary color? something like border:1px solid $color.primary?


Use map-get(). For example, to set the text color in a css element to “primary”:

 color: map-get($colors, primary);


I believe a better way than map-get is:

color($colors, primary, base)


Just providing a full example for clarity:

.some-class {
    color: color($colors, primary, base);



I have changed the default values as

$colors: (
primary : #fff,
mp-main : #62687f,
mp-secondary : #30bfbf,
mp-background : #F5F7FA,
mp-maintext : #4f5362,
mp-subtext : #99a7b2

will this cause any issue?


for clarity: that’s the right way to explain stuff


I get “undefined variable”. Your suggestion is not complete. How to import the variables from the variables file? Do I have to import the variables file into every component?


Well, first of all try the way @rapropos suggested, i.e. instead of map-get() use color($colors, primary, base).

Next, check that a $color array is defined in your src/theme/variables.scss file. All these variables are imported automatically.

PS: In principle you can define CSS/SASS variables wherever you want or need them. But the idea behind the theme colors is that they are defined for all components of your app in this central variables.scss file.


Thank you for your help.

Whatever I do, I get undefined. But I do have to say I am using the angular cli not the ionic one, if that makes a difference.

My folder structure:
| / |-components
| // |-somecomponent
| /// |-somecomponent.scss
|- theme
| / |-variables.scss
| // |- $colors: (
| /// primary: #333;
| // );

Whenever I want to use my color variable inside a component scss file, I get undefined. Did not find anywhere how to import those variables or if Ionic or angular-cli or node-sass makes it for you.


thanks for the answer. Could you explain a little bit more about why color($colors, primary, base) is better than map-get($colors,primary)? thanks