Foundation and CSS-Variables?

Hey folks, is there any way to get Foundation for sites scss-setup working with css-variables? I need multiple primary-colors for div. pages and I dont want to rebuild one css file for each page. Sure I could build the css on the fly but maybe someone managed foundation to work with something like:

:root {
  --primary-color: #awesome;
}

$foundation-palette: (
  primary: var(--primary-color),
...
);

Thanks for any hint

1 Like

Does this approach not work?
Not natively and not by default probably, you would have to build this into your build setup.

Well it works when I replace all darken/lighten/scale-functions but this is a lot of work. I decided to do that with just a bunch of elements and it works quite well but it would be awesome to have full support for css-variables in the future :slight_smile:

Definitely a good idea.

Please add this as feature request to https://github.com/foundation/foundation-sites/issues/11847

I think this should work by applying some plugin / loader to support this before running the sass tasks eg with postcss and some of its plugins.

I am facing the same problem.

  • For _color.color-pick-contrast(…) I have added a map to lookup the corresponding contrasting CSS variable, but that is rather a hack than a solution…
  • And I have introduced additional variables to replace the scale-color and rgb in _settings.scss

only small changes so far, but I am as well using only a subset of the foundation components.

If someone has some suggestions how to improve this, I would be grateful.

Looking forward to v7!