Hacker News Reader

Comment by tumblen | Hacker News Reader

One of the most powerful tools in my chest is Firefile (https://addons.mozilla.org/en-US/firefox/addon/firefile/).

Firefile allows you to edit CSS in firebug and save to your stylsheet right from there. It's incredible how this smooths out my workflow and I can't work without it.

Firefile, though, doesn't appear to be in development anymore and it's latest release is broken. (I had to make some manual edits to get it working).

Any chance we'll see Firefile's functionality coming to FF Dev Edition?

View on HN

If I'm understanding what you want, this is built in already.

https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Pretty sure you can. What would be nice would be if the same functionality worked with SASS (and LESS), so you could not only trace back to the original sources using source-map, but also edit the SASS, see the results in the browser, then save the SCSS files.

It would require a SASS interpreter built into the browser, not sure if that's practical or realistic. But it would help a lot for when you need to make edits locally and see the results on a remote server.

I use compass to watch the folder where my SCSS files are stored and compile automatically on save. That way I can use mapping to find the relevant SCSS, edit it in the browser, and save it to view the changes. It isn't as convenient as seeing the changes before save, but it's pretty close.

There is even a Hacks article about that https://hacks.mozilla.org/2014/02/live-editing-sass-and-less...

You know you can do this with the CSS inspector in Chrome, without any extension, right?

How?

Haven't used it in a while, but IIRC in the Sources tab of Chrome's Dev Tools, right-clicking a directory brings up a context menu with an "Add folder to workspace" option, which has you pick a local directory to map to the source directory. Then if you edit a file in the dev tools and command-S, it'll save that file where it appears in the local directory you picked.

Not just that, I recently found out that it also auto-saves changes that you make right in the css panel of the DOM inspector. It backs up your original value by commenting it out, but be aware of this when you experiment with this! Fiddling in with css in the inspector will make it persistent!

And also, it creates a history so you can revert to any version whenever you want.

Would you be able to share your edits?

Reply on news.ycombinator.com