LESS(CSS Pre Processor) introduction

{less}
( C S S P R E P R O C E S S O R )
R U S H I R A J B R A H M B H AT T

What is less?
• Less is a CSS pre-processor, meaning that it extends the CSS language, adding
features that allow variables, mixins, functions and many other techniques that
allow you to make CSS that is more maintainable, themeable and extendable.
• Less can run client side as well as server side.
• Less can be pre-compiled into CSS.
• At first less was written in Ruby ,later it was replaced by JavaScript.

Digging LESS Features
1) VARIABLES
2) MIXINS
a)Parametric Mixins
3) NESTING
a) Nested Rules
b) Conditional Nesting
4) PATTERN MATCHING
5) GUARD EXPRESSIONS (i.e. if statement)

LESS Features Cont..
6) Operators
7) Importing & File Paths
8) Functions
a) Color Functions
b) Math functions
9) NAMESPACES
10)SCOPE

LESS Installation
• Install Node.js in your PC.
– https://nodejs.org/en/
• After installing node open command prompt to install LESS
– npm install -g less
• After installation you can invoke the less compiler from command line by using
“lessc”
– lessc your-file.less
– By this you can see the output of CSS code in your command prompt only.
• To generate .css file in your folder use
– lessc your-file.less your-file.css
– This will generate a CSS file in your folder containing LESS file.

Less Installation Cont..
– Every time you make changes in LESS file you have to run this command to make
changes in CSS too.
– This will generate CSS file in your folder with auto generated pure CSS syntax from
LESS syntax.
• To automatically watch over the LESS file and make changes accordingly in to
CSS file
i. Install less-watch-compiler https://github.com/jonycheung/deadsimple-less-
watch-compiler
ii. In command Prompt
• npm install -g less-watch-compiler
iii. Go into your directory containing less file folder
• less-watch-compiler [LESS-FILE-FOLDER] [CSS-FILE-FOLDER-YOU-WANT-TO-GENERATE]

• This will watch over the folder in which .less file is there and will generate a
folder containing .css file.
– Example:
• Less-watch-compiler LessFolder CSSFolder
• You can also install less-autocompiler package in any editor you are using.
– Add line of code //out: your-file.css on top of .less file, it will automatically generate
.css file in your folder and will auto update as you update .less file.

• Client-side is the easiest way to get started and good for developing with Less,
but in production, when performance and reliability is important, it is good to
pre-compile using node.js or one of the many third party tools available.
• To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less"
– <link rel="stylesheet/less" type="text/css" href="styles.less" />
• Next, download less.js and include it in a <script></script> tag in the <head>
element of your page:
– <script src="less.js" type="text/javascript"></script>
NOTE :Using less.js in the browser is great for development, but it's not recommended
for production

Variables
Less Syntax CSS Syntax

Parametric Mixins

Nested Rules

Conditional Nesting

Pattern Matching
When there are two mixins with same name and different parameter sets, Less will match
the parameter pattern and apply the mixin that matches.

Guard Expressions(i.e. if)
LESS Syntax CSS Syntax
.myblock (@size) when (@size < 10){
font-size: @size;
color: red;
}
.myblock (@size) when (@size > 20) and (@size < 30){
font-size: @size;
color: green;
}
.myblock (@size) when (@size = 50),(@size=60){
font-size: @size;
color: blue;
}
.block1{
.myblock(5);
}
.block2 {
.myblock(15);
}
.block3 {
.myblock(50);
}
.block1 {
font-size: 5;
color: red;
}
.block2 {
font-size: 25;
color: green;
}
.block3 {
font-size: 50;
color: blue;
}

Operators

Importing
• If your less file is growing, you can make different less files of different sections
and importing those less file into your main less file.
• I have two files button.less and banner.less I have imported these files into my
main.less file.
• It is not necessary to write .less extension while importing, LESS is smart enough it
will understand that imported files are less files.

File Paths

Color Function
• LESS have color functions to play with colors. You can lighten the base color or
saturate it, even you can mix two or more different colors.
✓ saturate(@color, @amount)
✓ desaturate(@color, @amount)
✓ lighten(@color, @amount)
✓ darken(@color, @amount)
✓ fadein(@color, @amount)
✓ fadeout(@color, @amount)
✓ fade(@color, @amount)
✓ spin(@color, @amount)
✓ mix(@color1, @color2, @weight)
✓ grayscale(@color)
✓ contrast(@color)

Math Function
• Math operations can be used for standard arithmetic or unit conversions. In
addition to simple math, pre-processors also have complex math support such
as ceiling, rounding, getting min or max value in a list etc.
• LESS provides a couple of math functions you can use on number values:
– round(1.67); // returns '2'
– ceil(2.4); // returns '3'
– floor(2.6); // returns '2'
• If you need to turn a value into a percentage, you can do so with the
percentage function:
– percentage(0.5); // returns '50%'

Namespaces
Very useful if you want to create your own CSS libraries or distribute CSS.

Scope is similar to other programming languages. Variables and mixins first looked
up locally and then if not found it looks for them in the parent.
Scopes

Resource & Reference
• http://lesscss.org/#
• https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus

THANK YOU
R U S H I R A J B R A H M B H AT T

LESS(CSS Pre Processor) introduction

Recommended

More Related Content

What's hot (20)

Similar to LESS(CSS Pre Processor) introduction (20)

Recently uploaded (20)

LESS(CSS Pre Processor) introduction