5

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

Syed Aqeel
  • 1,009
  • 2
  • 13
  • 36

2 Answers2

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.

Klooven
  • 3,858
  • 1
  • 23
  • 41
3

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.

Also see: How to change the bootstrap primary color?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 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