A basic introduction to less.js

1. START USING LESS CSS
By: Ali MasudianPour <masud.amp@gmail.com>
LESS CSS - A BASIC INTRODUCTION
1

2. WHAT IS LESS CSS
•
Dynamic CSS
• Less is a “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)
LESS CSS - A BASIC INTRODUCTION
2

3. COMPILING IN BROWSER
•
Less.js will perform AJAX requests to grab your Less files, will then process those files to
convert them into CSS, and finally inject the resulting CSS in the head of your document.
•
There is a bad thing about it
•
if the user‟s JavaScript is deactivated, it will not work!
LESS CSS - A BASIC INTRODUCTION
3

4. LET‟S START
•
LESS codes are written into a file with .less extension
•
Variables
• Less variables can be declared and used with the @ symbol.
• Example:
@white: #fff;
.class{
background-color:@white;
}
LESS CSS - A BASIC INTRODUCTION
4

5. LET‟S START
•
In addition, we can assign a variable to another
•
For instance:
•
•
@myDefaultColor:@white;
MIXINS
•
With Less we can define “mixins”, which are something comparable to functions in other programming languages. In Less they‟re used
to group CSS instructions.
.Round{
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
border-radius:9999px;
}
#shape1{
.Round;
}
That‟s really simple!
LESS CSS - A BASIC INTRODUCTION
5

6. PARAMETRIC MIXINS
•
In LESS we can define parametric mixins. So we can send parameters through mixins
•
Example:
@defaultRadius:30px;
.RoundedShape(@radius:@defaultRadius){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
•
What an incredible feature!
LESS CSS - A BASIC INTRODUCTION
6

7. PARAMETRIC MIXINS
.Round{
.RoundedShape(9999px);
}
.RoundedSquare(@radius:@defaultRadius){
.RoundedShape(@radius);
}
LESS CSS - A BASIC INTRODUCTION
7

8. OPERATIONS
•
One other powerful feature of Less is the ability to use mathematical operations in your
stylesheets.
•
You can add, subtract, multiply and divide values
•
Example
@defaultShapesWidth:200px;
@borderSize:@defaultShapesWidth * 0.1;
•
it also works for colors
@defaultThemeColor:@lightBlue;
@borderColor:@defaultThemeColor - #222;
LESS CSS - A BASIC INTRODUCTION
8

9. COLOR FUNCTIONS
•
Less provides the following color functions:
•
darken() and lighten(), which add some black or white
•
saturate() and desaturate(), to make a color more colorful or more grayscale
•
Fadein() and fadeout, to increase or reduce transparency
•
Spin(), which modifies the hue of the color
• Examples:
@borderColor: desaturate(@defaultColor,100%)
@borderColor: darken(desaturate($defaultColort,100%),20%)
@defaultColor:spin(@mycolor1,100)
LESS CSS - A BASIC INTRODUCTION
9

10. NESTED RULES
•
When designing a complex page using css, you often have to chain selectors to aim a particular element in the DOM, like
this:
#header h1{}
#main h1{}
•
With LESS you can nest rules inside parent rules to mimic the DOM structure:
#header {
h1{}
}
.shape{
}
•
&:hover{background-color:@myColor;}
This & symbol represents the current selected elements. It is the equivalent of “THIS” in most programming language
LESS CSS - A BASIC INTRODUCTION
10

11. IMPORTING
•
It is a very good practice to separate your rules into different files instead of having a
1000 lines file.
•
Importing a file into another LESS is as simple as that:
• @import “file2.less”;
•
You can even omit the .less extension and just declare:
• @import “file2”;
LESS CSS - A BASIC INTRODUCTION
11

12. MODIFY VARIABLES
•
modifyVars enables modification of LESS variables in run-time.
•
When called with new value, the LESS file is recompiled without reloading.
•
Usage:
Less.modifyVars({
„@color1‟:‟red‟,
„@color2‟: „blue‟
});
LESS CSS - A BASIC INTRODUCTION
12

13. THANK YOU
•
References:
• Lesscss.org
• Verekia.com
LESS CSS - A BASIC INTRODUCTION
13