How to use variable.scss $color in scss file

Ionic Framework ionic-v3
1

by default the ionic had provide the following color
$colors: (
primary: #EF5A28,
secondary: #f5911e,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B,
darkgraycustom: #333333,
mediumgraycustom:#666666,
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?

1 Like
2

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

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

I believe a better way than map-get is:

color($colors, primary, base)
12 Likes
4

Just providing a full example for clarity:

.some-class {
    color: color($colors, primary, base);
}
9 Likes
5

Hi,

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?

6

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

2 Likes
7

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?

8

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.

9

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:
src
|-app
| / |-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.

1 Like
10

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

11

The reason you may be getting the undefined is due to color: map-get($colors, primary); being placed in the scss file before the $colors property, thus the reason you are getting undefined. Place it after the $colors: (); block and it will no longer give you an error.

12

Thank you for your effort.

Anyhow, I find it logical that variables inside the theme and variables folders are loaded before the scss in the components. So I have no idea, why they would load differently.

1 Like
13

On Ionic 4, use this:

.aClass {
color: var(–ion-color-primary);
}

6 Likes
14

In my case it was var(--ion-color-primary); double dash in the beginning. Maybe you have missed it.

2 Likes
15

in ionic 4
color:var(–ion-color-primary);