Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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).

like image 567
Shaun Avatar asked Feb 24 '12 07:02

Shaun


People also ask

How do I edit a SCSS file?

SCSS files are created by right clicking the Styles group in the Design panel and choosing the New > SCSS File option. To edit a . scss file, double click it. This will open it in our code editor.

Why are more developers using less and Sass instead of CSS?

SASS allows you to use a nested syntax, which is code contained within another piece of code that performs a wider function. In SASS, nesting allows a cleaner way of targeting elements. In other words, you can nest your HTML elements by using CSS selectors.


2 Answers

LiveReload to the rescue!

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

like image 71
Andrey Mikhaylov - lolmaus Avatar answered Oct 05 '22 12:10

Andrey Mikhaylov - lolmaus


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..

like image 24
bzx Avatar answered Oct 05 '22 11:10

bzx