Live preview 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 refresh the browser. At the moment I use CSS Edit which is great for live previews but I cant find a way to get the live previewing to work with LESS or SCSS. My ideal situation would be to get a truely live (or as close to) setup working with Textmate and my broswer. I have looked at a few options, WebPutty is great but it's in Beta and web based so I'd love a solution that could fit into my existing workflow.

Many thanks

Answer 1

This might be what you're looking for: livereload.com

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

It's currently only for 64-bit Macs. Its also in beta.. Windows version under dev.

Can't seem to find a link to the v1 that is mentioned on the site?

Answer 2

live.js is your solution :)

It doesn't not only work with html, js, css but also less. You have to trick it with filetype of css:

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

Answer 3

If you're using 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 are using localhost, I've not figured out how to get this to work yet.

Answer 4

Tried the bookmark version on rails local server. Works a breeze! CssRefresh

Answer 5

Check out EDGE. http://getedge.io - it let's you live edit Sass and LESS files from Sublime Text or Textmate. No need to save the file - it updates as you type. You can sign up for the private beta right now.

Answer 6

My co-worker and I whipped up http://less2css.org the other day. Allows you to choose the version and see your less converted in realtime.

Hope it helps someone.

Answer 7

I think there is no such add-on right now, but I'm also a fan of Live CSS Editor (if that's what you meant by 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 Chrome add-on (analogue to Live CSS Editor). It includes syntax highlighting and LESS support with use of client-side LESS library. It's not user-friendly yet so not a candidate to the Chrome Store, but here is it's Google Code Project where it can be downloaded and loaded into Chrome as unpacked extension. I'll try to improve it over time, but anyone else can try too ;)

Screenshots and a bit more are in this blog post.

Answer 8

There is no complete solution for what you are looking. 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 might want to try

Brackets works well with live changes but applies only for chrome

Here's what I do and it serves the purpose and works like a charm in mac/pc and linux Have one terminal open that does sass --watch Have another terminal/app that lets you run live-reload

Your sass will compile and as soon as your stylesheet changes all your browsers get refreshed But you can't do style injection with this, meaning the page WILL refresh (if you want to theme dialogs, you will have to open them again) But there are other tools available for style injection as well

Hope this helps!