Run LESS in JSFiddle

by scispear

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div class="red">
    RED
    <div class="red">
        RED
    </div>
    <div class="blue">
        BLUE
    </div>
</div>
<div class="blue">
    BLUE
    <div class="red">
        RED
    </div>
    <div class="blue">
        BLUE
    </div>
</div>

CSS

@none 0;
@red: 1;
@blue: 2;

.resetBg(@bg, @a, @b) when not (@a = @b) {
    background: @bg;
}

.resetColors(@key){
    .red { .resetBg(red, @key, @red); }
    .blue { .resetBg(blue, @key, @blue); }
}

.resetColors(@none)
.red { .resetColors(@red); }
.blue { .resetColors(@blue); }

JavaScript

// 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();