Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
Unlike regular CSS as we know it, LESS works much more like a programming language. It’s dynamic, so expect to find some terminologies like Variables, Operation and Scope along the way.
Variables :
The variables will allow us to store a constant value that later can be reused in the entire stylesheet.
Example :
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
}
.class2 {
background-color: #fff;
color: @color-base;
}
.class3 {
border: 1px solid @color-base;
}
Mixins:
In LESS, we can use Mixins to reuse whole declarations in a CSS rule set in another rule set. Here is an example:
.gradients {
background: #eaeaea;
background: linear-gradient(top, #eaeaea, #cccccc);
background: -o-linear-gradient(top, #eaeaea, #cccccc);
background: -ms-linear-gradient(top, #eaeaea, #cccccc);
background: -moz-linear-gradient(top, #eaeaea, #cccccc);
background: -webkit-linear-gradient(top, #eaeaea, #cccccc);
}
In the above snippet, we have preset a default gradient color inside the.gradients class. Whenever we want to add the gradients we simply insert the.gradients this way:
div {
.gradients;
border: 1px solid #555;
border-radius: 3px;
}
Mixins can also take arguments, which are variables passed to the block of selectors when it is mixed in.
For example:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
And here’s how we can mix it into various rulesets:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Parametric mixins can also have default values for their parameters:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
We can invoke it like this now:
#header {
.border-radius;
}
#footer { .border-radius(10px);}
You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:
.wrap() {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
Which would output:
pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
Nested Rules :
In LESS CSS, we can simplify the rule sets by nesting the child elements inside the parents, as follows;
nav {
height: 40px;
width: 100%;
background: #455868;
border-bottom: 2px solid #283744;
li {
width: 600px;
height: 40px;
a {
color: #fff;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
}
}
You can also assign pseudo-classes, like :hover, to the selector using the ampersand (&) symbol.
Let’s say we want to add :hover to the anchor tag above, we can write it this way:
a {
color: #fff;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
&:hover {
background-color: #000;
color: #fff;
}
}
Operation :
We can also perform operations in LESS, such as addition, subtraction, multiplication and division to numbers, colors and variables in the stylesheet.
Let’s say we want element B to be two times higher than element A. In that case, we can write it this way:
@height: 100px
.element-A {
height: @height;
}
.element-B {
height: @height * 2;
}
Scope :
Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren’t found, the compiler will look in the parent scope, and so on.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
Importing :
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
@import “library”; // library.less
@import “typo.css”;
Lazy Loading :
Variables are lazy loaded and do not have to be declared before being used.
Valid Less snippet:
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
RG BLOG 