Sass issue using color function

[craigpotter]

When looking at Bootstrap Sass Options, it gives the example

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

This doesn't work for me.
After debugging and putting lots of @debug statements in my own code and the BS4 _function.scss, I noticed that wrapping the color name in quotes stopped it working for me. It just returns null.

// From the Sass map with our `color()` function
.beta { color: color(purple); }

This version works for me.
Is any one else having this problem ?

• Windows 10
• Sass complied with Gulp-Sass

[MartijnCuppens]

@craigpotter, which version of gulp-sass are you using?

[craigpotter]

3.1.0

[MartijnCuppens]

In _variables.scss colors are defined like this:

$colors: () !default;
$colors: map-merge((
  blue: $blue,
  indigo: $indigo,
  purple: $purple,
  pink: $pink,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  cyan: $cyan,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-800
), $colors);

The problem here is that the type of the keys is color and not string because blue, purple,... are color names. So you must use color(purple) to get the value of purle.

But one key, gray-dark is not a a valid color name, so in that case you need to add the quotes.

Best option is to convert all keys to strings, so that you can always use the quoted notation.