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

score 1 · Answer 1 · answered Nov 06 '12 at 14:53

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.

answered Nov 06 '12 at 14:53

nc.

95
3
7

I've been searching for a tool just like this for a while now. Hoping to get my hands on a beta copy! – Alex Kendrick Jul 27 '13 at 22:18

score 1 · Answer 2 · answered Oct 08 '13 at 21:28

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!

I just spent few hours evaluating this option, and definitely I'm considering using this for my current project. I'm also waiting on http://usetakana.com to check the beta which seems to provide the same king of workflow. — Flavien Volken, Mar 03 '14 at 07:53
Takana is awesome for SCSS, but no LESS support as of this comment. — OB7, Oct 13 '15 at 22:24

score 1 · Answer 3 · answered Dec 13 '11 at 22:56

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?

answered Dec 13 '11 at 22:56

shousper

1,116
10
12

1

LiveReload doesn't match 'without having to save the document'. – KPM Aug 23 '12 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](http://incident57.com/codekit/help.php), 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. – shousper Aug 27 '12 at 05: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. – KPM Aug 27 '12 at 19:50

score 1 · Answer 4 · answered Feb 17 '12 at 00:03

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.

Read http://blog.readingroom.com/2011/10/27/live-js-why-its-amazing-and-getting-it-to-work-with-php-files/ it might help. — KPM, Aug 23 '12 at 11:27

score 0 · Answer 5 · answered Aug 01 '12 at 04:04

0

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

answered Aug 01 '12 at 04:04

Manuite

46
1

2

Doesn't match the 'without having to save the document' criterion either. – KPM Aug 23 '12 at 11:30
In Sublime Text enable auto save, so it saves changes for you after each edit. – OB7 Oct 13 '15 at 22:22

score 0 · Answer 6 · answered Jan 09 '13 at 01:26

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.

answered Jan 09 '13 at 01:26

bfricka

182
2
12

score 0 · Answer 7 · answered Oct 08 '13 at 20:54

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.

score 0 · Answer 8 · answered Jan 10 '12 at 16:39

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

answered Jan 10 '12 at 16:39

Dzung Nguyen

8,760
13
61
98

Live preview with LESS or SCSS?

8 Answers8