LESS

by lollero

HTML

<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js"></script>
<div><span></span></div>

CSS

body {background:#333;padding:30px; }

div {background:#fff;width:100%;height:100px;margin:0 auto;
    > span {
        background:#222;
        width:calc(100% - 10px);
        height:100px;
        margin:0 auto;
        display:block;
        
        color:#fff;
        text-align:center;
        font-weight:bold;
        font-size:30px;
        line-height:100px;
    }
}

JavaScript

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

setInterval(function(){
    var padding = $("div").width()-$("div > span").width();
    $("div > span").html(padding/2);
},500);