Just a different approach to faster front-end fine tuning with devTools


I work with very demanding designers and they always want the pixel perfection. So I was experimenting a little bit with different ways to interact with the CSS (with a designer seated next to me) in order to find a fast way to develop.

I love Sass, but it’s really slow to develop in this way, as I show the designers the css with Chrome DevTools, and when they approve, I have to copy the changed code, go to the line mentioned in the inspector, paste it, and return to the browser (this is quite boring for them).

But without sass, devtools gives you the option to save all the changes in real time, even when doing the changes directly in the element. It allows to save the sass as well, but only the source file, so if you fine tune an element it doesn’t get saved.

Having this powerful option I linked a devtools.css to the head section and now I’m trying to develop this way. After I have everything pixel perfect as they like, I would run a css to sass tool (there are many in the internet) and stick with the well ordered sass.

As I didn’t find an article in the internet on how to do this (even outside sage) I am wondering if it does make sense to front-end developers around here, or if you have a similar trick to share, as a great Sage selling point is faster and scalable development.

What do you think about it?

This topic was automatically closed after 42 days. New replies are no longer allowed.