CODEWITHSUNDEEP
csssassworkflow
Iorippi
Iorippi

Reputation: 175

How do you edit and test SCSS instantly on browser?

Despite cool feature SCSS/Compass brought into my production routine, it still bugs me a bit as to how long it takes to edit a line of css and test them on browser. (That's mostly what my team says but being responsible for developing workflow, I can't just ignore this.)

To be specific about what 'long process' it's taking, they are:

  1. Copying 'tested' lines from inspector (such as Chrome developer tool) to text editor to update SCSS file (More than a few seconds)
  2. Uploading compiled CSS file to remote server (4+ seconds)
  3. Refreshing browser for testing (sub-second)

And it's bugging me to repeat this every single time.

As to why I'm so bothered with them, before SCSS I used to do:

  1. Edit a line on inspector (which automatically updates local files, which also leads browser to update style from local css file) (sub-second, even without any mouse clicking or keyboard stroke)

I'm thinking about building server locally, on top of Docker to emulate nearly identical environment to the production server, so that 2. (Uploading file to server) part would be solved.

As I code style only sometimes, I can work with it, but someone who works on them everyday is being frustrated so much to the point they are not willing to learn SCSS yet. (Which I think it is ridiculous concerning the huge time they will be saving just by saving a bunch of reusable lines, etc. However they also have to keep the time given project allows them to spend while learning SCSS.)

It seems like nobody is typing pure CSS code by hand today, so this question might be kind of outdated, and probably that's why I wasn't quite successful at finding somebody complaining about this. However I thought it's cool to know anybody's method or just thought around this. Any recommendation? If the answer was "Just get used it.", then I can work with it too.

Upvotes: 3

Views: 2751

Answers (1)

Ander
Ander

Reputation: 788

Assuming that you can set an environment with sass "watching" the changes of the files and generate a source map, you can make a workflow like this:

  • Edit the source sass files from within chrome
  • Sass generate the css file
  • The css file is reloaded and the browser pick up the changes.

https://developers.google.com/web/tools/setup/setup-preprocessors

I personally don't like this workflow because usually, the final code is more unorganized but for small changes in the code, it can work.

I've tested on chrome v67, my configuration is something like this:

  • I have a sass build watcher (configured to generate source maps)
  • I have browsersync configured for auto reload/inject the CSS (https://browsersync.io/)
  • I have Enable CSS source maps checkbox checked on the devtools settings
  • I have a workspace set on chrome which points to my sass folder

And the workflow:

  • Go to the Elements tab and inspect some element
  • Jump to the source panel
  • Edit the source file (on chrome)
  • Save the file

It seems like nobody is typing pure CSS code by hand today

Well, I don't know about that, I think that more and more people are going back to write pure CSS.

Upvotes: 1

Related Questions