The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
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;}
