Run LESS in JSFiddle

by tjdragon

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/FontAwesome.otf"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.eot"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.svg"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.woff"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<header>
     <h1>Photo Bush</h1> 
</header>
<content class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-lg-10 col-sm-offset-1 col-sm-10">
    <div class="pbPost">
         <h2><a href="#">Ensenada</a></h2>

        <hr/> <a class="thumbnail">
        <img src="https://farm4.staticflickr.com/3600/5705525961_fb2274b572_b.jpg"/>
    </a>

    </div>
</content>
<footer class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-lg-10 col-sm-offset-1 col-sm-10 text-center">
    <div class="socialcontainer"> <span>. . .</span>
 <a href="#">
            <div class="social">&#62220;</div>
        </a>

    </div>
</footer>

CSS

@import url(http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css);
@import url(http://fonts.googleapis.com/css?family=Arimo:400, 700);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/FontAwesome.otf);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.eot);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.svg);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf);
@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/fonts/fontawesome-webfont.woff);
@import url('http://weloveiconfonts.com/api/?family=entypo');

@maincolor: #FFA500;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
* {
    margin: 0;
    padding: 0;
    font-family:'Arimo', sans-serif;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	        box-sizing: border-box;         /* Opera/IE 8+ */
}

html{
    background-image: url(http://newevolutiondesigns.com/images/freebies/hd-wallpaper-35.jpg);
    background-position: center top;
    background-size: round auto; 
    background-repeat: repeat;*/
}

header, content, footer {
    display: block;
    margin: 0;
}

header {
    color: @nice-blue;
    text-shadow: 1px 0px #b27300;
    position: relative;
    padding-bottom: 20px;
    background:#fff;
    padding-top: 20px;
    .gradient(top, #ffffff, #e4e4e4);
}

header h1 {
    padding-left: 20px;
    font-weight: bolder;
    margin-top: 0;
    color: @nice-blue;
}

content {
    padding-bottom: 10px;
    background-color: rgba(111,111,111,0.7);
}

footer {
    background-color: #ddd;
    color: #f6f6f6;
    padding: 10px 20px;
}

.socialcontainer{
    display:inline-block;
    padding: 5px;
}
.socialcontainer span{
    color:...

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