RFC: Switch from SCSS Variables to CSS Custom Properties

[jurekbarth]

Hi 👋
i would like to propose a change on how we use variables for fonts, sizes, colors... basically everything that does not use complicated math functions from SASS.

Status Quo:
We use SASS variables in order to organize our settings.

Proposed Change:
We use CSS Custom Properties

Why?

• You can change on runtime in all modern browsers (latest 2 versions, no IE11)
• You can scope variables
• They are a standard
• Designers could tinker with settings and send us the final code. I tested this already, it made the process way easier.
• We could build themes more easily, without having to change the basis.

So what do you think about that? Of course we could post process these variables for older browsers such as IE11.

[janrembold]

Hey @jurekbarth, I like this idea. The only pain point (as always) is the mentioned IE11 support. So currently there is no question about "we could post process". IMO this is more a "we must post process" until we get rid of IE11. Unfortunately this is still the default browser of most large companies.

The only way how to achieve this that comes to my mind, would be to conditionally load those styles with our loader. Maybe add some simple and generic IE11 test there. What do you think?

Btw, this is offtopic here, but this would also be very interesting to create and then conditionally load ES5 or ES6 to different browsers 🚀

[timomayer]

Hi Jurek,
thanks for the suggestion. I agree we should look into that. I agree with @janrembold IE11 support is a must and we have to test that. I have concerns that postprocessing for IE11 will lead to different results and our debug and IE11 test efforts will raise which will kind a be contra productive, but as said only a test can tell. I also think we can only start using it in production some time mid next year. Most of our browser support agreements with clients are including browsers "of the past 1.5-2 years" not only latest 2. 1.5 for Edge will be 17th of april 2019.

I suggest: we keep in mind to use it in a small prototype like project which has not to run in IE11
Afterwards we invest some time to add the IE11 support and see how it works

[jurekbarth]

@janrembold i'm with you for post processing for now, but for development and future readiness i think it's a good fit now.
@timomayer so you suggest to keep scss for now and change later on or are you open for change when post processing?

Regarding conditionally loading: Let's discuss that in another issue: #148

[timomayer]

To restart this discussion: i am open to use it with post processing or we can try if there is any chance that a client side polyfill like https://github.com/jhildenbiddle/css-vars-ponyfill works - even in our big projects