Live editing (CSSEdit-like) Sass/LESS without CMD-S? [closed]

Question

I really would like to switch to a CSS preprocessor like Sass or LESS but I am too accustomed with my current setup and have not seen any solutions that exist for me. Are there any?

I currently use CSSEdit on the Mac which is a live CSS editor. Every time people talk about this they seem to think "live" means that the page reloads every time you save the file. This is not what I mean. If I am typing some CSS in CSSEdit then the changes are shown as-I-type, without having to save the file. This is such a time saver, especially if you are using trial and error to decide eg. how much padding to put on an element or trying out different colours.

So all the Sass or LESS options seem to be, write Sass/LESS, press CMD+S, the page reloads and you see your changes. This is not good enough for me. Is there anything I can do?

To further complicate things, CSSEdit has now been abandoned by its developer in favour of Espresso, which I have not moved to yet because it is still lacking some of the features I depend on (customising the reformatting of code for one).

Pleistocene

I usually edit my CSS in Chrome Inspector to get feedback into what I'm doing with the live DOM, then take the changes either into my CSS file or into my SCSS file which I would compile with compass – Galactometer

You would like takana. No saving of scss files. usetakana.com – Mutton

Answer 1

LiveReload to the rescue!

I don't think you'll find a solution that does not require you to save the file.

Necessary

I've been using LiveReload for a long time now, I should have gone back and edited this question! The one beacon of light for not needing to press save is livestyle.emmet.io - they are apparently working on LESS / SASS support. – Pleistocene

Answer 2

LESS syntax support in various editors is still not wide, so it will take time before such sophisticated functionality will exist.

It would require the editor to compile on every change in file, and this wouldn't be effective to compile when you type a letter... so perhaps it would have to compile when there is valid syntax (compiled without errors)... which may not make it so "live". It could be compiling to CSS or using less.js, perhaps the latter could suit this purpose better (no need to use external software). Head to Sublime Text plugin development and perhaps write such plugin? :) Sublime Text is the best editor I've used, also because of its flexibility when it comes to plugins. So maybe?

Otherwise you'd have to continue to use CSSEdit and do live CSS editing as you described and then simply copy changed code to LESS files - remember that any CSS is valid LESS. I do the same in Safari/Chrome Inspector or Firebug, and then apply changes in .less files. Not ideal but works..

Devlen

I'd rush out and buy a license for any software that does what I need, but I don't have the skills to make a plugin unfortunately. If anyone were to make a plugin I'd be happy to donate. – Pleistocene

@Shaun, you can try getting in touch with this guy wbond.net/sublime_packages - he writes both paid and free plugins, maybe he can do that? But on the other hand I'm not sure this is worth the effort, most people (including me) live without the functionality you're talking about - it's a matter of perception, just like in Matrix ;) – Devlen

It seems a plugin for Sublime Text and Live Reload to do just this is in development: twitter.com/#!/livereload/status/173096350756511745 – Pleistocene

Answer 3

In my opinion, this project looks really promising: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Chantry

That's only source map support for Chrome, nothing more. – Necessary