Run Less (+ prefixfree) in jsFiddle

by seven_phases_max

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.js"></script>
<script src="http://cdn.lukej.me/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://cdn.lukej.me/prefixfree/1.0.7/prefixfree.dynamic-dom.min.js"></script>
<a href="http://lesscss.org/">
    <div class="somediv">
        Less is more! 
    </div>
</a>

CSS

// Less can go here 

@primary-color: #333 + #033 + #003;

body {
    padding: 33px;
    // background: @primary-color;
    animation: bkg 3.3s infinite alternate;
}

.somediv {
    background: white;
    padding: 33 / 2px;
    border-radius: 33 / 3px;
    box-shadow: 2px 2px 6px fade(black, 33%);
    background-image: linear-gradient(-33deg, fade(@primary-color, 33 * 2%), white);
}

a {
    font: bold 133% "arial", sans-serif;
    text-decoration: none;
    color: @primary-color;
    &:hover {
        color: spin(@primary-color, -33);
    }
}

@keyframes bkg {
    0% {background: spin(@primary-color, -33)}
    to {background: spin(@primary-color, +33/3)}
}

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();