A Pen by Derek Wheelden.

index.html

<div class="container">
  <h1>Live LESS Compiling</h1>
  <p>Just go ahead and type right in there</p>
  <textarea>
// Variables
@background: hsl(10, 70%, 10%);
@editor-font: consolas, monospace;
    
// Styles
body {
    background: lighten(@background, 20%);
}

textarea {
  font-family: @editor-font;
  font-size: 0.7em;
}
  </textarea>
</div>

Live-LESS-Compilation.markdown

Live LESS Compilation

Compile LESS as it's typed on the page.

A Pen by Derek Wheelden on CodePen.

License.

script.js

var lessOutput, lessRaw,
    appendStyle = $('<style />', {
      id : 'less'
    }).appendTo('head'),
    parser = new(less.Parser)(),
    CssCompile = {
      typingTimer: null,
      doneTypingInterval: 500,
      $style: $('head style#less'),
      init: function() {
        var _this = CssCompile;
        lessRaw = $('textarea').val();
        if (lessRaw) _this.compile(lessRaw);
      },
      compile: function(raw) {
        var _this = CssCompile;
        parser.parse(raw, function(err, css){
          if (err) {
            lessOutput = err;
            // Do some error handling
          }
          if (css) {
            lessOutput = css.toCSS({ compress: true });
            _this.$style.text(lessOutput);
          }
        });
      }
    };

CssCompile.init();

$('textarea').keyup(function () {
  clearTimeout(CssCompile.typingTimer);
  CssCompile.typingTimer = setTimeout(CssCompile.init, CssCompile.doneTypingInterval);
});

style.scss

@import "compass";
textarea {
  display: block;
  width: 100%;
  height: 16em;
  margin: 1em auto;
  padding: 1em;
  border: none;
}

/** PAGE STYLES **/
@import url(http://fonts.googleapis.com/css?family=Lato:300,700|Oswald);

html, body { width: 100%; height: 100%; }
html { font-size: 62.5%; }
body {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  line-height: 1.5;
  color: white;
}
.container {
  width: 45em;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-family: 'Oswald';
  text-transform: uppercase;
  text-align: center;
}

p {
  margin: 0;
  text-align: center;
}