Run LESS in JSFiddle

by scispear

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div class="ice span1">
    ICE
    <div class="ice span2">
        ICE
    </div>
    <div class="silver">
        SILVER
    </div>
    <div class="slate">
        SLATE
    </div>
    <div class="charcoal">
        CHARCOAL
    </div>
</div>
<div class="silver">
    SILVER
    <div class="ice ">
        ICE
    </div>
    <div class="silver">
        SILVER
    </div>
    <div class="slate">
        SLATE
    </div>
    <div class="charcoal">
        CHARCOAL
    </div>
</div>
<div class="slate">
    SLATE
    <div class="ice ">
        ICE
    </div>
    <div class="silver">
        SILVER
    </div>
    <div class="slate">
        SLATE
    </div>
    <div class="charcoal">
        CHARCOAL
    </div>
</div>
<div class="charcoal">
    CHARCOAL
    <div class="ice ">
        ICE
    </div>
    <div class="silver">
        SILVER
    </div>
    <div class="slate">
        SLATE
    </div>
    <div class="charcoal">
        CHARCOAL
    </div>
</div>

CSS

@shade1: red;
@shade3: green;
@shade5: blue;
@shade7: orange;
@shade9: black;
@shade10: yellow;

    .resetColors(@bg, @color) {
        background: @bg;
        color: @color;
        h1, h2, h3, h1 a, h2 a, h3 a { color: @color; }
    }

    .resetBg() {
        .ice { .resetColors(@shade1, @shade9); }
        .silver { .resetColors(@shade3, @shade9); }
        .slate { .resetColors(@shade7, @shade10); }
        .charcoal { .resetColors(@shade10, @shade5); }
    }

    .ice { .resetColors(@shade1, @shade9); .resetBg(); }
    .silver { .resetColors(@shade3, @shade9); .resetBg(); }
    .slate { .resetColors(@shade7, @shade10); .resetBg(); }
    .charcoal { .resetColors(@shade10, @shade5); .resetBg(); }

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