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>
<div class="callout right">I am just .right</div>
<div class="callout right default">I am also .default</div>
<div class="callout right invert">And I am .invert</div>

CSS

.callout {
    position: relative;
    float: left;
    clear: both;
    padding: 20px;
    &.default {
        background: #f0f0f0;
        color: #333333;
    }
    &.invert {
        background: #333333;
        color: #f0f0f0;
    }
    &.right {
        float: right;
        &:after {
            right: 100%;
            top: 30px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            border-width: 19px 19px 0px 30px;
            margin-top: -20px;

            border-right-color: red;

            .default& {
                border-right-color: green;
            }
            .invert& {
                border-right-color: blue;
            }

        }

    }
}

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