Run LESS in JSFiddle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js"></script>
<div class="text-red">
    Look a box with shadow
</div>

CSS

@colors: {
  black: #312f2f;
  grey: #bdbaba;
  purple: #848ff0;
  blue: #4894c4;
  yellow: #ffb64c;
  orange: #ff834c;
  green: #b5e678;
  pink: #ee84f0;
  red: #ff4c4c;
  white: #FFFFFF;
}

each(@colors, {
  .text-@{value}{ color: @@{value}; }
})

JavaScript

/*

    While we are waiting for JSFiddle to support LESS integration I figured
    I would get a work around sorted so I can still write it in here
    
    Twitter: @aaronlayton
*/

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

/* 
    You could put this as a oneliner and use it as a shim for JSFiddle

    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
    
*/