Using the LESS CSS Pre-processor

Webcamp 3.0 | Kolkata

Kaustav Das Modak

What are CSS Pre-processors?

They make CSS rich and dynamic

LESS is inspired by SASS

Extends CSS but stays close to CSS syntax

LESS is a superset of CSS

All valid CSS are valid LESS code

What is interesting about LESS?

• Variables
• Mixins
• Nested Rules
• Functions & Operations
• Import other LESS files

Install LESS

$ npm install -g less

Compiling a LESS file to CSS

$ lessc input.less output.css

Variables

They make hex codes easier to remember

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);

#header {
    color: @light-blue;
}

#footer {
    color: @nice-blue;
}
                    

Output

#header {
    color: #6c94be;
}
#footer {
    color: #5b83ad;
}
                    

Mixins

Use entire blocks of CSS as variables

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered;
}
.post a {
    color: red;
    .bordered;
}
                    

Output

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

                    

Parametric Mixins

Reuse blocks with parameters

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

#header {
  .border-radius;
}
.button {
  .border-radius(10px);
}

                    

Output

#header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.button {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

                    

Nested Rules

Rule in rule in rule…

#header {
    color: black;

    .navigation {
        font-size: 12px;
    }

    .logo {
        width: 300px;

        &:hover { text-decoration: none }
    }
}

                    

Output

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}
                    

Functions

Easy way of doing tedious things

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
                    

Output

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

                    

Operations

Now your CSS can do maths!

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);
                    

Output

color: #222222;
background-color: #444444;
height: 60%;
                    

Imports

Remember a Python script?

@import "variables.less";
@import "mixins.less";

#container {
    background-color: @nice-blue;
}

#content {
    .bordered;
}
                    

Output

#header {
  color: #6c94be;
}
#footer {
  color: #5b83ad;
}
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#container {
  background-color: #5b83ad;
}
#content {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

                    

For the full API see

lesscss.org

@kaustavdm

Code samples were taken from lesscss.org

This presentation: kaustavdm.github.io/less-webcamp-presentation