sadaco

.rounded{
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
#main {
 width: 200px;
 height: 200px;
 background: @lightgray;
 .rounded;

sadaco

.rounded(@radius:3px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

sadaco

#main {
  width: 200px;
  height: 200px;
  background: @lightgray;
  .rounded(20px);
}

sadaco

@lightblue:#a9c6d2;

.cloudstyle(){
   content: '';
   position: absolute;
   background: @lightblue;
   z-index: -1
} //every part of the Cloud has this style

#cloud {

sadaco

#cloud {
   width: 350px;
   height: 120px;
   
   background: #a9c6d2;    
   border-radius: 100px;
   -webkit-border-radius: 100px;
   -moz-border-radius: 100px;
   position: relative;
   margin: 120px auto 20px;

sadaco

@lightblue:#a9c6d2;

.cloudstyle(@bgColour, @border-radius){ // Here we add the parameters
   content: '';
   position: absolute;
   background: @bgColour;
   z-index: -1;
   .rounded(@border-radius);
} //every part of the Cloud has this style

sadaco

.cloudstyle(@bgColour:#292929, @border-radius:100px)

sadaco

@general-margin: 10px;
.cloud{
    margin-top:@general-margin;
}

.cloudmini{
     margin-top:@general-margin +10px;
}

sadaco

+,-,*,/ - Arithmetic operators
lighten(@colour, n%) - Returns the colour value @colour, lightened by n percent
darken(@colour, n%) - Returns the colour value @colour, darkened by n percent
saturate(@colour, n%) - Returns the colour value @colour, with saturation increased by n percent
desaturate(@colour, n%) - Returns the colour value @colour, with saturation decreased by n percent
fadein(@colour, n%) - Returns the colour value @colour, made n percent more opaque
fadeout(@colour, n%) - Returns the colour value @colour, made n percent more transparent
hue(@colour) - Returns the hue component of the colour value @colour
saturation(@colour) - Returns the saturation component of the colour value @colour
lightness(@colour) - Returns the lightness component of the colour value @colour

sadaco

@size: 60px;
h1 { font-size: @size; }
h2 { font-size: @size * .8; }
h3 { font-size: @size * .6; }
h4 { font-size: @size * .4; }
h5 { font-size: @size * .2; }