Compile LESS as it's typed on the page.
A Pen by Derek Wheelden on CodePen.
<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> |
Compile LESS as it's typed on the page.
A Pen by Derek Wheelden on CodePen.
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; | |
} |