LESS(CSS preprocessor)

LESS(CSS Preprocessor)LESS(CSS Preprocessor)
By: VIPIN KUMAR

Introduction to LESSIntroduction to LESS
LESS is a programming
LESS compiles to CSS3
LESS is a CSS Preprocessor
LESS syntax is modeled after traditional
CSS
LESS is often referred to as “dynamic
css”

Weakness of CSSWeakness of CSS
Lack of Essential features(like
Variables, Mixins etc.)
Hard to maintain(Huge messy CSS Files)
Greater Repetitions

Why LESS?Why LESS?
Save time
Reduce mistakes
Reduce repetition (DRY)
It makes logical sense to break out CSS
into multiple files
More Readability

What can LESS do?What can LESS do?
Variables in your CSS
Mixins (think functions) that allow you
to reuse rule sets
Nesting of styles to mimic your DOM
structure(Hierarchical Structure like
DOM)
Simple mathematical operators: +, -, *, /
of numbers and colors
Mathematical operations such as floor(),
ceiling() and round()
Color operations such as darken(),
lighten(), fadein() and fadeout()

VariablesVariables
Variable Interpolation
The examples above focused on using
variables to control values in CSS rules,
but they can also be used in other places
as well, such as selector names, property
names, URLs and @import statements.
// Variables
@mySelector: banner;
// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
Compiles To
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

Variables Lazy Loading
Variables are lazy loaded and do not have
to be declared before being used.
.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
default variables
We sometimes get requests for default
variables - an ability to set a variable
only if it is not already set.
.float(@val: left){
float: @val;
}
Compiled To
.lazy-eval-scope {
width: 9%;
}
div{
.float;
}
Compiles to
.div {
Float: left;
}

Variable Scope
The scope of a variable refers to the places where it is available. If
you define a variable at the very start of your LESS file it will be
available to any code you write after it.
You can also define a variable inside a CSS rule. In this case the
variable is not available outside of this ruleset; it can only be used
locally.
@color: #222222;
a {
@color: #ffffff;
color:@color;
}
button {
background: @color;
}

MixinsMixins
Reusable classes are called mixins,
Mixins Can accept parameters,
Can define default value for parameters,
@arguments is a special variable that
contains the ordered value stored in all
parameters
.RoundBorders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.RoundBorders;
}
//Output
.RoundBorders {
border-radius: 5px;
}
#menu {
color: gray;
border-radius: 5px;
}

Guards
A guard is a special expression that is
associated with a mixin declaration that is
evaluated during the mixin process. It must
evaluate to true before the mixin can be
used. Guards are useful when you want to
match on expressions, as opposed to simple
values or arity.
We use the when keyword to begin describing a list of guard expressions.
Guards can be separated with a comma—if any of the guards evaluates to true, it’s
considered a match:
.mixin (@a) when (@a > 10), (@a < -10) { ... }
Instead of a comma, we can use the and keyword so that all of the guards must
match in order to trigger the mixin:
.mixin (@a) when (isnumber(@a)) and (@a>0) { ... }
Finally, you can use the not keyword to negate conditions:
.mixin (@b) when not (@b > 0) { … }

.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) { // this is always included
color: @a;
}
Note:The full list of comparison operators usable in guards are: >, >=, =,
=<, <.
Calling:
.class1 { .mixin(#ddd) }
// this matches the first mixin
.class2 { .mixin(#555) }
// this matches the second mixin
Output:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}

If you want to match mixins based on value
type, you can use the is* functions. These
are—iscolor, isnumber, isstring, iskeyword,
and isurl. If you want to check if a value,
in addition to being a number, is in a
specific unit, you may use one of these—
ispixel, ispercentage, isem.
.mixin (@a) when (iscolor(@a)) {
color: @a;
}
.mixin (@a) when (ispixel(@a)) {
width: @a;
}
body {
.mixin(black);
}
div {
.mixin(960px);
}
//Output
body {
color: #000000;
}
div {
width: 960px;
}

LOOPsLOOPs
In Less a mixin can call itself. Such
recursive mixins, when combined with Guard
Expressions and Pattern Matching, can be
used to create various iterative/loop
structures.
.loop(@counter) when (@counter >
0) {
// next iteration
.loop((@counter - 1));
// code for each iteration
width: (10px * @counter);
}
div {
.loop(5); // launch the loop
}
Output:
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}

A generic example of using a recursive loop to generate CSS gridA generic example of using a recursive loop to generate CSS grid
classes:classes:
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n)
{
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.column-1 { width: 25%; }

Nesting of styles to mimic your DOMNesting of styles to mimic your DOM
structurestructure
LESS was designed to be as close to CSS as possible, so the
syntax is identical to your current CSS code. Cleaner Structure
With Nesting. you don’t have to repeat selectors over and
over again;
Output:
#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a
{}
LESS
Structure
# header {
#nav {
ul {
li {
a {}
}
}
}
}

NamespacesNamespaces
Namespaces in programming languages are
typically used to group packages of
functionality together.
When starting work on a new website based on
your framework you can add this #my_framework
bundle and use it without messing up any
other styles you might already have or want
to add in the future.
This is also a great way to enable quick
theme changing and modification. If you
develop a number of themes for your company
to use as templates on demand you can include
all of them as bundles in the same LESS file
and use use the one you need.
Examples is in next Slide

#my_framework {
p {
margin: 12px 0;
}
a {
color:blue;
text-decoration: none;
}
.submit {
background: red;
color: white;
padding:5px 12px;
}
}
.submit_button {
#my_framework >
.submit;
}
Output:
#my_framework p {
margin: 12px 0;
}
#my_framework a {
color: blue;
text-decoration: none;
}
#my_framework .submit {
background: red;
color: white;
padding: 5px 12px;
}
.submit_button {
background: red;
color: white;
padding: 5px 12px;
}

ReferencesReferences
http://lesscss.org/features/#mixins-feature
http://www.sitepoint.com/a-comprehensive-introduction-to-less-
mixins/
http://webdesign.tutsplus.com/articles/get-into-less-the-
programmable-stylesheet-language--webdesign-5216

LESS(CSS preprocessor)

Recommended

More Related Content

What's hot (20)

Similar to LESS(CSS preprocessor) (20)

Recently uploaded (20)

LESS(CSS preprocessor)