The slide intend to give a brief knowledge of Less(CSS pre processor).

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 :)