CSS - Less Sample of Less - http://codepen.io/justgooddesign/pen/pLJAb INFO: http://lesscss.org/ DOCS: http://devdocs.io/less/ COMPILE: http://crunchapp.net/

CSS-Less-Reference .less

@import "elements.less";
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

@height : 50px;
@black : #000000;
@white : #ffffff;
@water : #2682D5;
@sky : #33CBE0;
@red : #DC3964;
@orange : #EC7547;
@yellow: #FFD728; 
 
/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

html, body {
  height:100%;
}

.trans-color(@color, @alpha){
  background:@color;
  opacity:@alpha;
}

.rounded-corners (@radius: 8px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

nav {
  position:fixed;
  left:30px;
  top:30px;
  overflow:hidden;
  .rounded-corners;
  
  ul {
    color:#444444;
    text-align:center;
    line-height:@height;
    
    li {
      width:@height;
      height:@height;
      .trans-color(@white; 1.0);
      margin-bottom:1px;
      cursor:pointer;
      font:400 16px/@height 'Lato', sans-serif;
      
      &:hover {
       .trans-color(@white; 0.8);
      }
      
      &:active {
        .trans-color(@white; 0.5);
      }
    }
  }
}

section { 
  display:table;
  width:100%; 
  height:100%;
  text-align:center;
  
  p {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    color:@white;
    font:400 48px/50px 'Lato', sans-serif;
  }
}

#section1 { background-color:@water; }
#section2 { background-color:@sky; }
#section3 { background-color:@red; }
#section4 { background-color:@orange; }
#section5 { background-color:@yellow; }



/* Mixin */
.reflect (@length: 50%, @opacity: 0.2){
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}
 
/* Implementation */
#somediv {
    .reflect(20%, 0.2);
}


/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
 
/* Implementation */
#somediv {
    background-color: BADA55;
    .quick-gradient(top, 0.2);
}


/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
 
/* Implementation */
#someDiv {
    .gradient(left, #663333, #333333);
} 

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
 
/* Implementation */
#someDiv {
    .transform(5deg, 0.5, 1deg, 0px);
} 

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
 
/* Implementation */
#somediv {
    .transition(all, 0.5s, ease-in);
} 
 
#somediv:hover {
    opacity: 0;
}

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
 
/* Implementation */
#somediv {
    .box-shadow(5px, 5px, 6px, 0.3);
} 

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}
 
/* Implementation */
#somediv {
    .border-radius-custom(20px, 20px, 0px, 0px);
}