Skip to content

Instantly share code, notes, and snippets.

@hadyfayed
Created January 28, 2014 04:26
Show Gist options
  • Save hadyfayed/8662256 to your computer and use it in GitHub Desktop.
Save hadyfayed/8662256 to your computer and use it in GitHub Desktop.
A Pen by Derek Wheelden.
<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>
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);
});
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment