Fix Colorname Selectors SASS Warning ("You probably don't mean to use the color value black in interpolation here.")

[thomasfrobieter]

Compiling foundation-sites with a current version of SASS (1.43.4), throws various of those issues:

Warning: You probably don't mean to use the color value white in interpolation here.
It may end up represented as white, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "white").
If you really want to use the color value here, use '"" + $name'.

╷

377 │ &.#{$name} {
│ ^^^^^
╵
node_modules/foundation-sites/scss/components/_button.scss 377:15 foundation-button()

Needs to be fixed by writing the selector like so:

&#{"." + $name} {

or

&.#{"" + $name} {

.. but the first one doesn't look that ..hacky.

[joeworkman]

Would you like to submit a PR?

[joeworkman]

I tried to generate these same warnings but could not. What are you running to see these?

[thomasfrobieter]

I got these by running our custom gulp sass build task (stripped it down to the relevant part):

function buildSass() {
  return src(config.sassRegex, {
      since: lastRun(buildSass)
    })
    //find files that depend on the files that have changed
    .pipe(sassInheritance({
      dir: 'scss/'
    }))
    .pipe(plumber()) // Hint: Plumber always need to be piped first!
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(dest('./' + config.folderCss));
};

Relevant Versions:

• sass: 1.43.5
• node: 14.17.6

Similar issues:
ConciseCSS/concise.css#52
https://stackoverflow.com/questions/57455245/how-to-i-solve-this-sass-interpolation-issue

[joeworkman]

Thanks. I will work on replicating this. Any PRs would be helpful if you have the time.

[glen-84]

I think a better fix is to just quote your map keys, as suggested in the Sass documentation:

Most of the time, it’s a good idea to use quoted strings rather than unquoted strings for map keys. This is because some values, such as color names, may look like unquoted strings but actually be other types. To avoid confusing problems down the line, just use quotes!

So change something like:

$foundation-palette: (
    // ...
    black: #000
);

To:

$foundation-palette: (
    // ...
    "black": #000
);

Perhaps the Foundation Sass should do this as well, just to set an example.

[thomasfrobieter]

@glen-84 great simple fix, I've tested this right now, works perfectly fine!

So we just need to fix these files:

• foundation-sites/scss/settings/_settings.scss

  Line 71 in 8846fda

  $foundation-palette: (

• foundation-sites/scss/_global.scss

  Line 27 in 8846fda

  $foundation-palette: (

• probably the docs

[thomasfrobieter]

Investigated an issue with the button-style() mixin when using this fix:

@include button-style("secondary");

results in:

.selector{
  background-color: secondary;
  color: #fff;
}
.selector:hover{
  background-color: #ff7915;
  color: #fff;
}

Map:

$button-palette: (
  "primary": #0080ff,
  "secondary": $primary-color
}

While this works well:

@include button-style($primary-color);

[ameotoko]

It seems that _settings.scss should not be edited directly, because it is (re)generated by a gulp task.