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 us to make CSS that is more maintainable, themeable and extendable. It has also been widely deployed in numerous front-end frameworks like Bootstrap.
Less syntax is not standard. The browser would not be able to process and render the output. For that we need a compiler.
Example:
Below is Less Code:
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
background-color: #fff;
color: @color-base;
}
}
The compiler will process the code and turn Less syntax into browser-compliant CSS format:
.class1{
background-color: #2d5e8b;
}
.class1.class2{
background-color: #fff;
color: #2d5e8b;
}There are many tools available for compiling CSS. Some of them are mentioned below:
1. Using JavaScript:
Less comes with less.js file which can be easily deployed in our website. Create a CSS file with
.less extension and link it through rel attribute.
<link rel="stylesheet/less" type="text/css" href="main.less" />less.js file can be download from package manager, else we can directly provide CDN
<link rel="stylesheet/less"type="text/css"href="main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>We can use any code editor including Notepad++, sublimeText, VisualStudio etc.
Unlike regular CSS, Less works much more like a programming language. It’s dynamic, so expect
to find some terminologies like Variables, Scopes and Operations.
In normal CSS, we write:
.class1{
background-color: #2d5e8b;
}
.class2{
background-color: #fff;
color: #2d5e8b;
}
.class3{
border: 1pxsolid#2d5e8b;
}
But Less allows variables. The variables will allow us to store a constant value that later can be
reused in the entire stylesheet. So above code in Less will be:
@color-base: #2d5e8b;
.class1{
background-color: @color-base;
}
.class2{
background-color: #fff;
color: @color-base;
}
.class3{
border: 1pxsolid@color-base;
}
Beside from color, we can also put other values in the variables like for example:
@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5
So, using Less we can reuse the code.
Thanks,
Krupal Barot.
Subscribe
Login
0 Comments