learning less

by techsin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<div class="box">Hello</div>

CSS

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.box {
  background-color: @light-blue;
    height: 100px;
    width: 100px;
    display: inline-block;
    
}

JavaScript

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