Run Less in jsFiddle

by gokulmaha

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<a href="http://lesscss.org/">
    <div class="somediv">
        Less!
    </div>
</a>

CSS

// Less can go here
// Implementation

@primary-color: #369;

body { 
    background: @primary-color; 
    padding: 30px; 
}

.somediv {
    background: #fff;
    padding: 15px;    
    border-radius: 10px;
    .box-shadow(2px, 2px, 6px, 0.33);
    .gradient(top, #fff, #e4e4e4);
}

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

// Mixins
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}

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