The dynamic stylesheet language LESS CSS.

The dynamic stylesheet language.

         LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Less css usages and documentation =>

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).    

Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked up locally, and if they aren’t found, the compiler will look in the parent scope, and so on.   

Topics

• Variables

•  Mixins

• Nested Rules

• Operations

•  Functions.

• Client-side Usag

• Server-side Usage

Installation Process :-

ruby-lang.org -- download -setup

cmd ---->

        c:\\ 

        cd Ruby186

        cd bin

        gem install less

        lessc c:\Less\style.less

Implemetnation of Less CSS :

1. Border Radius Simple

/* Mixin */

.border-radius (@radius: 3px) {

    -webkit-border-radius: @radius;

    -moz-border-radius: @radius;

    border-radius: @radius;

}

/* Implementation */

#somediv {

    .border-radius(10px);

} 

2. Border Radius Custom

/* Mixin */

.border-radius-custom (@topleft: 3px, @topright: 3px, @bottomleft: 3px, @bottomright: 3px) {

    -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(10px, 0px, 0px,10px);

} 

3. Box Shadow

/* Mixin */

.box-shadow (@x: 0px, @y: 2px, @blur:2px, @alpha: 0.6) {

    -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(1px, 1px, 2px, 0.5);

} 

4. Transition

/* Mixin */

.transition (@prop: all, @time: 2s, @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.1s, ease-in);

} 

5. Transform

/* Mixin */

.transform (@rotate: 120deg, @scale: 1.5, @skew: 1deg, @translate: 5px) {

    -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(10deg, 0.8, 2deg, 0px);

} 

6. Linear Gradient

/* Mixin */

.gradient (@origin: left, @start: #ffffff, @stop: #ff6300) {

    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, #ff6300, #000000);

} 

7. Quick Gradient

/* Mixin */

.quick-gradient (@origin: left, @alpha: 0.4) {

    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: ff6300;

    .quick-gradient(top, 0.4);

}

8. Webkit Reflection

/* Mixin */

.reflect (@length: 60%, @opacity: 0.1){

    -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(30%, 0.1);

}

9. Complementary Color Scheme

/* Mixin */

@base: #ff6300;

@complement1: spin(@base, 90);

@complement2: darken(spin(@base, 90), 10%);

@lighten1: lighten(@base, 10%);

@lighten2: lighten(@base, 40%);

/* Implementation */

.one   {color: @base;}

.two   {color: @complement1;}

.three {color: @complement2;}

.four  {color: @lighten1;}

.five  {color: @lighten2;}

10. Subtle Color Scheme

/* Mixin */

@base: #ff6300;

@lighter1: lighten(spin(@base, 5), 10%);

@lighter2: lighten(spin(@base, 10), 20%);

@darker1: darken(spin(@base, -5), 10%);

@darker2: darken(spin(@base, -10), 20%);

/* Implementation */

.one   {color: @base;}

.two   {color: @lighter1;}

.three {color: @lighter2;}

.four  {color: @darker1;}

.five  {color: @darker2;}

-> Readmore