training - less

by paulocoelho

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div class="somediv ">
    I am the first one
</div>

<div class="somediv2 ">
    I am the second one
</div>

CSS

@color_background : #333 ;
@color_box : #fff ;
@red : maroon ;
@space : 10px ;
@font-size: 1em ;



/* Implementation */
body { background:@color_background;padding:30px; }

div{
    background:@color_box;
    margin:@space;
    padding:@space;
}

.somediv {
    font-size: @font-size;
}

.somediv2 {
    font-size: @font-size;
}

JavaScript

// you dont need this code on your project
// this is just so it works on jsFiddle
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();