How to use bootstrap color variable in SASS

Question

It's bootstrap 4-beta in SASS.

The question is how I can use the bootstrap color variable in my SASS application? What I have done to do this is:

color: $theme-colors(primary);

but this doesn't work and throws an error.

any help is appreciated.

Thank you

score 8 · Answer 1 · answered Nov 23 '17 at 20:17

8

You should use this: color: theme-color("primary");

Theme colors isn't a variable, it is a function, that's why you shouldn't use $ before it.

answered Nov 23 '17 at 20:17

Klooven

score 2 · Answer 2 · answered May 31 '18 at 20:30

2

Just use...

color: $primary;

Bootstrap assigns values to the color values before adding them to the theme-colors so they're all available in the variables.scss.

answered May 31 '18 at 20:30

Zim

Yep, this method is simpler than using the function/mixin! – Klooven Jun 01 '18 at 08:18
1

This gives me a different color than the one defined in my theme-colors as primary. The answer below works: `color: theme-color("primary");` – maesk Jun 03 '20 at 18:46

2 Answers2