Lean CSS with
Overview
What is
{less}?Why use
{less}?Features
- Variables
- Nested Rules
- Mixins
- Functions
- + More
Compilation Tools
Short Demo
What is {less}?
A CSS pre-processor that extends the CSS language, adding features that allow variables, mixins, operations, functions and many other techniques to make CSS that is more maintainable, themable and extendable.
Why use {less}?
Variables
/* Syntax */
@{variable name}: value;
/* Example Declarations */
@brand_color: orange;
@text_color: #fff
@link-color: #428bca;
/* Usage */
section{
background-color: @brand-color;
}
.link:hover{
color: @link-color;
}Nested Rules
// LESS Nesting
.grand-parent{
background-color: pink
.parent{
color: black
.child{
font-size: 24px;
}
}
}
// Pure CSS
.grand-parent{
background-color: pink;
}
.grand-parent .parent{
color: black;
}
.grand-parent .parent .child{
font-size: 24px;
}
It is a good practice to limit nesting to maximum of 3 levels
Mixins
//Mixin Example
.bordered{
border-top: dashed 1px red;
background-color: yellow;
}
.box1{
color: green;
.bordered;
}
.box2{
color: blue;
.bordered;
}
//Compiled CSS
.bordered{
border-top: dashed 1px red;
background-color: yellow;
}
.box1{
color: green;
border-top: dashed 1px red;
background-color: yellow;
}
.box2{
color: blue;
border-top: dashed 1px red;
background-color: yellow;
}
Cont...
//Mixin Example2
#id-mixin{
padding: 10px 20px;
line-height: 14px;
}
.hover-mixin(){
border-bottom: dotted 2px orange;
}
.nav-link{
font-size: 16px;
.hover-mixin;
#id-mixin;
}
.sidebar-link{
font-size: 24px;
background-color: black;
.hover-mixin;
}
//Compiled CSS
#id-mixin{
padding: 10px 20px;
line-height: 14px;
}
// No mixin output for .hover-mixin
.nav-link{
font-size: 16px;
border-bottom: dotted 2px orange;
padding: 10px 20px;
line-height: 14px;
}
.sidebar-link{
font-size: 24px;
background-color: black;
border-bottom: dotted 2px orange;
}