Run LESS in JSFiddle
HTML
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div class="parentDiv">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS
.new_mixin (@n) {
div {
&:nth-of-type(n) {
position: absolute;
top: @n * 20px;
width: 50px;
border: 1px solid #ff0;
}
}
}
.parentDiv {
.new_mixin(1);
}
JavaScript
/*
While we are waiting for JSFiddle to support LESS integration I figured
I would get a work around sorted so I can still write it in here
Twitter: @aaronlayton
*/
// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');
// Step 2: Tell LESS to refresh the styles
less.refreshStyles();
/*
You could put this as a oneliner and use it as a shim for JSFiddle
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
*/