DEV Community

Discussion on: 🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

Thanks for the feedback, this has to be the best comment I have ever read!
I find it hard to express myself and yet I have captured yours and others interest which is absolutely fascinating, perhaps I am not barking up the wrong tree.

I will try to write a cleaner step by step edit - or even a new post that is more like a tutorial, documenting the principles in practice, reading code is easier to digest sometimes. What I really want to see is what other people have made with this approach and what problems or positives they have found, how did they improve it, this will us to write a next-gen tooling for everyone. I think a tutorial will help alot.

Pictures speak a thousand words, so here is the next in the series preview.

A bloody event listener registered in scss, Magic!
This perfectly illustrates what I have talked about, this is 100% pure styling logic where its meant to be, in a stylesheet.

Business logic would be clearly separated into JavaScript. A form submission for example would then just handle where data goes, not also what animations happen and how the UI updates, I think it is possible to make this work with Angular, React and Vue as well, so that is another post in this series.

Whats amazing is that this is achievable with existing tools today, this is thanks in part to css variables. Its about to get a lot more powerful, css mixins are coming! Google "@apply css rule".

What makes me smile from ear to ear is that this scss actually registers a JavaScript event listener, but thats a story for another time, keep your eyes pealed. 😄

Collapse
 
andrejmikulicka profile image
Andrej Mikulička

Wow, this looks AWESOME! Thanks for the info! Also, yes, sometimes it's better to see the code, because this comment explained more than the whole series to me.