Emmet LiveStyle is a new plug-in that puts a different spin on live CSS editing, overcoming several of the limitations of existing tools.
Instead of replacing changes in your files, it maps them from one source to another, making it possible to associate two completely different CSS sources for live editing.
This means that, even if the CSS source in your browser is minified, you can still do bi-directional live editing with LiveStyle. Also, because it doesn’t work with your files directly, you don’t need to keep them in your local file system – they can be opened from an FTP location, or anywhere else.
A member of the Emmet team explained: “While other tools simply swap the contents of the CSS files, LiveStyle patches them. Every time you change some CSS, LiveStyle parses it into a tree, compares it with the previous state and creates a special patch that describes how the CSS was changed."
“Source patching also makes it possible to map changes from preprocessors (like LESS and Sass) directly into CSS and vice versa. This is shown in the demo video, but currently it’s just an experiment and requires additional investigation and funding,” he added.
LiveStyle displays your changes as you type, with no need to refresh the page or save your files. When working on responsive designs, a page can be opened in multiple windows and changes will be applied to every one. Edits made in developer tools in one window are applied to all. It’s even possible to simultaneously live-edit different websites that share the same CSS code base.
Emmet LiveStyle will be a paid-for product when it's finished, but it's available for free while it's in public beta. It's currently available for Safari and Chrome, but more browsers are planned to be available.
Take a look at this video for a demonstration of some impressive features:
