Live viewing with LESS or SCSS?

Question

I am trying to figure out if there is a way to use LESS or SCSS without having to save the document or update the browser. Right now I'm using CSS Edit, which is great for real-time previews, but I can't find a way to get real-time previews for working with LESS or SCSS. My ideal situation would be to get a real live (or close to it) setting working with Textmate and my browser. I looked at several options, WebPutty is excellent, but in beta and on the Internet, so I would like a solution that could fit into my existing workflow.

Many thanks

Answer 1

This may be what you are looking for: livereload.com

I just found this myself, while googling for the same problem, Haa!

It is currently intended for 64-bit Mac computers only. Its also in beta. Windows version for dev.

It seems that the link to v1 that is mentioned on the site was not found?

Answer 2

If you use static files, you can use this code taken from http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html

<!-- Link directly to LESS stylesheet first --> <link rel="stylesheet/less" href="style.less" type="text/css" media="screen" /> <!-- Then link to LESS, and enable development watch mode --> <script src="less-1.2.1.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> less.env = "development"; less.watch(); </script> <!-- Voilà! Instant LESS previews in Espresso --> 

However, if you use localhost, I did not understand how to make this work.

Answer 3

Check out EDGE. http://getedge.io - it allows you to edit Sass and LESS files from Sublime Text or Textmate. There is no need to save the file - it is updated as you type. You can sign up for a private beta right now.

Answer 4

There is no complete solution for what you are looking for. Chrome dev tools (with sass source maps enabled) is your best bet, but I don't think you can do mixins

http://livestyle.emmet.io/ is another option you can try

Brackets work well with live changes, but apply only to chrome

Here is what I do and it serves the purpose and works like a charm on mac / pc and linux You have one terminal that does sass --watch You have another terminal / application that allows you to run live-reload

Your sass will compile, and as soon as your stylesheet changes, all your browsers will be updated. But you cannot inject style with this, that is, the WILL refresh page (if you want dialogs on topics, you have to open them again). But there are other tools to insert style.

Hope this helps!

Answer 5

live.js is your solution :)

It not only works with html, js, css, but also less. You have to trick it with the css file type:

 <link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css"> 

Answer 6

I tried the bookmark version on the local rails server. The breeze is working! Cssrefresh

Answer 7

My colleague and I took off at http://less2css.org the other day. Allows you to select a version and see it less transformed in real time.

Hope this helps someone.

Answer 8

I think there is no such add-on right now, but I'm also a fan of the Live CSS Editor (if that's what you meant CSS Edit).

I think it would be useful to have something similar with SASS or LESS support, so I made a quick prototype for such a Chrome add-on (similar to the Live CSS editor). It includes syntax highlighting and LESS support using the LESS client library . It is not user-friendly, but not a candidate for the Chrome Store, but here it is the Google Code Project , where it can be downloaded and uploaded to Chrome as an unpacked extension. I will try to improve it over time, but anyone else can try it too :)

Screenshots and a bit more in this blog post .