Live preview with LESS or SCSS?

L

8

7

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

Lodhia answered 6/12, 2011 at 19:24 Comment(0)

M

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?

Matador answered 13/12, 2011 at 22:56 Comment(3)

LiveReload doesn't match 'without having to save the document'. – Ochone 23/8, 2012 at 11:26

Cmd+S or Ctrl+S is pretty trivial.. Other solutions on this Q are probably as close as you'll get right now. Another I found was codekit, but it's reloading features only seem to work in Chrome/Safari - and still requires you to save the file before it will refresh the browser. This is something I don't think you'll ever get around unless someone builds a fully browser integrated editor, or the browser engines decide to natively support the format as well as live editing in their dev tools. – Matador 27/8, 2012 at 5:58

The problem is not that it is trivial, but that you need to save to disk changes (and thus overwrite) that you might not want to actually save. Semantically, saving means saving, not previewing. That's why it's bad design :) Espresso/CSSEdit does it right for CSS, but they don't support LESS (yet). I guess saving is the best we can have for the moment. – Ochone 27/8, 2012 at 19:50

S

1

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.

Sicklebill answered 17/2, 2012 at 0:3 Comment(2)

Read blog.readingroom.com/2011/10/27/… it might help. – Ochone 23/8, 2012 at 11:27

This still requires a save for the changes to be loaded in. – Aeri 27/7, 2013 at 22:19

L

1

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.

Liverpool answered 6/11, 2012 at 14:53 Comment(1)

I've been searching for a tool just like this for a while now. Hoping to get my hands on a beta copy! – Aeri 27/7, 2013 at 22:18

D

1

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!

Deciare answered 8/10, 2013 at 21:28 Comment(2)

I just spent few hours evaluating this option, and definitely I'm considering using this for my current project. I'm also waiting on usetakana.com to check the beta which seems to provide the same king of workflow. – Mary 3/3, 2014 at 7:53

Takana is awesome for SCSS, but no LESS support as of this comment. – Recuperate 13/10, 2015 at 22:24

C

0

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

Coccyx answered 10/1, 2012 at 16:39 Comment(0)

E

0

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

Eula answered 1/8, 2012 at 4:4 Comment(2)

Doesn't match the 'without having to save the document' criterion either. – Ochone 23/8, 2012 at 11:30

In Sublime Text enable auto save, so it saves changes for you after each edit. – Recuperate 13/10, 2015 at 22:22

M

0

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.

Marthmartha answered 9/1, 2013 at 1:26 Comment(0)

A

0

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.

Atomism answered 8/10, 2013 at 20:54 Comment(0)

Recommended topics

Hot tags