@supports not compiling into CSS

[digitoimistodude]

@supports not compiling into CSS

[ronilaukkarinen]

Hello and thanks for taking the time to open an issue. We don't use @supports much so that's why haven't noticed it. It seems there is a open issue about this. I really don't know how to help in this, it's best for you to remove it completely from node_modules, gulp task and package.json if you use this. We may remove it ourselves if this becomes a problem.

For your quick question: Yes, there are many use cases where SCSS variables are more useful. You can't really use CSS vars in SCSS mixin parameters but you can use CSS variables inside them. Also, there is not that big of a difference when using variables with colors, so that's why all colors are SCSS variables, because they are easier to reuse (again, mixins). Also SCSS variables support cool things like modifiers like darken or lighten whereas CSS vars don't.

In spacings we have moved on completely to CSS variables as you can see in _spacings.scss. This is because they usually are manipulated within media queries. Colors still have mixed variables because of the use cases explained above. In some projects we use only CSS vars in colors as well if we need to change the color scheme in the user interface etc.

So yes, mixed vars are still needed. But as with other things, we might move away from them in some point. But using them together is currently like best from both worlds so why give that up? We are of course all open for suggestions.

[ronilaukkarinen]

This is still more of the gulp-combine-media-queries issue linked in my previous comment. No further discussion to this issue so closing as stale.

[ronilaukkarinen]

@kiwwwipl Please note: We have replaced gulp-merge-media-queries with mqpacker (postcss plugin) that should work better.