The document provides an overview of Less, a CSS pre-processor. It discusses key Less features such as variables, mixins, operations, functions, extend, loops, namespaces, and nested rules. These features allow variables, nesting, mixins, functions and many other techniques to extend CSS and make stylesheets more maintainable.

1. Ankit Shukla
Knoldus Software LLP
Ankit Shukla
Knoldus Software LLP
Less

2. Topics to be Covered
● About Less
● Variables
● Scope
● Mixins
● Nested Rules
● Namespaces
● Operations
● Functions
● Extend
● Mixin Guards
● Loop
● Parent Selector

3. About 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.
● Developed by Alexis Sellier in 2009.
● The current stable version is 1.7.3
● Inspired by SASS.
●

4. Variables
● Variables in less are defined with @
● The assignment is done by :
● It stores a constant value.
● Some properties are used many times in our CSS.
It helps to make our code easier to maintain by
giving us way to control the repeated properties
from a single location.

5. Variables Continues...
Less Code:
@color : #33333;
p{
color : @color;
}
.demo {
background : @color;
}
Output :
p{
color : #333333;
}
.demo{
background : #333333;
}

6. Scope
@var: red;
#page {
#header {
@var: white;
color: @var; // white
}
color : @var;
}
● Output
#page {
color: #ff0000;
}
#page #header {
color: #ffffff;
}

7. Mixin
.demo-class{
color : #aaa;
font-size : 20px;
}
.class-A{
.demo-class;
background : #000;
}
Output:
.demo-class {
color: #aaa;
font-size: 20px;
}
.class-A{
color : #aaa;
font-size : 20px;
background : #000;
}

8. If you do not want that mixin to be output, you can put
parenthesis after it.
.mixin {
color: black;
}
.other-mixin() {
background: white;
}
.class {
.my-mixin;
.other-mixin;
}
Output:
.mixin {
color: black;
}
.class {
color: black;
background: white;
}

9. Parametric Mixins
.demo-class(@padding){
padding : @padding;
}
.class-A{
.demo-class(5px);
background : #000;
}
.class-B{
.demo-class(8px);
}
Output
.class-A{
padding : 5px;
background : #000;
}
.class-B{
padding : 8px;
}

10. Nested Rules
#header {
color: #999;
.logo {
width: 300px;
&:hover{
width:350px;
}
}
}
Output:
#header {
color: #999;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
width: 350px;
}

11. Namespaces
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
}
}
#header a {
color: orange;
#bundle > .button;
}
● Output
#bundle .button {
display: block;
border: 1px solid black;
background-color: grey;
}
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}

12. Operations
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
@base-color : #aaa;
#class{
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
width : @other + 50%;
}
● Output
#class {
color: #222222;
background-color: #bbbbbb;
height: 60%;
width: 65%;
}

13. Functions
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width);
color: saturate(@base, 5%);
}
● Output
.class {
width: 50%;
color: #f6430f;
}

14. Extend
● Extend is a Less Pseudo-Class which merges the
selector it is put on with ones that match what it
references.
● Extend Syntax : .a:extend(.b) {} or
.a { &:extend(.b);}

15. Extend Continues...
.a {
color : #666;
}
.b:extend(.a){
font-size : 24px ;
}
● Output
.a,
.b {
color: #666;
}
.b {
font-size: 24px ;
}

16. Extend All
.test.c {
color: orange;
}
.test {
color : #555;
}
.replacement {
&:extend(.test all);
}
● Output
.test.c,
.replacement.c {
color: orange;
}
.test,
.replacement {
color: #555;
}

17. Mixin Gaurds
.mixin (@a) when (percentage(@a) >=
50%) {
background-color: black;
}
.mixin (@a) when (percentage(@a) < 50%)
{
background-color: white;
}
.mixin (@a) {
width: percentage(@a);
}
.class1 { .mixin(.4) }
.class2 { .mixin(.6) }
● Output
.class1 {
background-color: white;
width: 40%;
}
.class2 {
background-color: black;
width: 60%;
}

18. Loop
.generate-columns(@n, @i: 1) when
(@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(2);
● Output
.column-1 {
width: 50%;
}
.column-2 {
width: 100%;
}

19. Parent Selector
.A {
.B {
&:hover{
color :#222;
}
& & {
color: green;
}
}
}
● Output
.A .B:hover {
color: #222;
}
.A .B .A .B {
color: green;
}

20. Parent Selector Continues...
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
border : none;
}
}
}
● Output
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
border: none;
}

21. Thank You :)