less.js centered widget

by paulftw

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<div class=centered>
    i'm in the middle
</div>

<div class=widget>
    <div class=title>
        Widget Title
    </div>

    <div class=body>
        Widget Content
    </div>

</div>

CSS

@width: 200px;
    
.centered {
    position: absolute;
    width: @width;
    left: 50%;
    margin-left: -(@width / 2);
    
    border: 1px solid green;
}


.widget {
    
    position: relative;
    padding: 5px;
    top: 50px;
    border: 1px solid green;
    border-radius: 5px;
    
    .title {
        background-color: #ddd;
    }
    
    .body {
        margin-top: 10px;
        border: 2px dashed #eee;
        height: 60px;
    }
}

JavaScript

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