0

I've been meaning to get into/start using less/sass but am having a major hurdle.

I normally edit my css using cssedit/espresso 3 which is basically like firefox's firebug.

After goofing around with codekit etc, it just seems really cumbersome process in terms of being able to see css changes live and being able to experiment.

Is there a similar solution (to css edit/espresso Live preview) of being able to edit styleshees live in less/sass approach?

TessellatingHeckler
  • 27,511
  • 4
  • 48
  • 87
user31344
  • 1
  • 1
    The fantastic [GruntJS](http://gruntjs.com/) with a watch task – Jonathan de M. Dec 09 '13 at 17:13
  • I typically only use sass for a bulk set of my default CSS, like templates, buttons, forms, tables, etc. However, when I do need to convert sass->css, I can do so with one click of the button using http://koala-app.com/. Which is FREE. – Mike Barwick Dec 09 '13 at 17:14
  • thanks for the resources folks. Will look into them. Are these basically the same feature as codekit that automatically updates files? – user31344 Dec 09 '13 at 17:20
  • GruntJS is much more powerful than codekit but it requires more knowledge and time put in. – agconti Dec 09 '13 at 17:26
  • Gotcha - so it's essentially the same thing? – user31344 Dec 09 '13 at 18:00

1 Answers1

0

I can only answer you question for LESS. Personally i think grunt(tool) are great compile your source for production or syntax checking in collaboration projects. The best tool for "live" testing and editing your LESS code seems your browser in combination with a preferred text/css editor.

See also: http://lesscss.org/#usage "Client-side usage" here you will find everything you need. Also they will give you the same message:

Client-side is the easiest way to get started and good for developing your LESS. For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.

You will have the opportunity to setup a global javascript object with settings. The most important setting in this case seems env set it to development this will prevent caching of your LESS files and show compile error direct in your browser:

enter image description here

To start add something like this to the head of a html file:

<link rel="stylesheet/less" href="test.less">
<script type="text/javascript">less = { env: 'development',  poll: 5000 };</script>
<script src="less.js" type="text/javascript"></script>

If you saved the above in less.html call in your browser http://localhost/less.html#!watch now edit your LESS files (test.less in this example). After saving your LESS file the browser will show you your results "live" (within 5 seconds). You can use @import in test.less and also the imported files are under watch.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224