LESS - Leaner Style Sheets
July 31, 2020 by Naresh Thumma

Any application is not consummate without HTML & CSS. While HTML is web development language and CSS is presenting language. Symphisys Software Consulting And Solutions Private Limited offers trustworthy service in both these domains and help our clients to get applications and web products that rule over the hearts of the end users.

LESS is dynamic stylesheet language that extends the standard CSS syntax. It means that we can create a LESS stylesheet using regular CSS and just add LESS code to the stylesheet as and when we needed it.

LESS compiler is written in JavaScript, we can just include it in our web pages along with our LESS stylesheet. The compiler converts LESS code into CSS when the browser loads the webpage.

LESS is easy to understand and use. It gives lots of useful features are like…

How to Install LESS ?

  • Download the less.js file from LESS official website or use below direct CDN link.
    CDN <script src="https://cdn.jsdelivr.net/npm/less"> </script>
  • Keep that file somewhere in website.
  • Write LESS and save it in a file called, custom.less.
  • Include less.js and LESS file in the head or body section of web pages.

NOTE : Atleast XAMPP server is mandatory to run the LESS

<link rel="stylesheet/less" type="text/css" href="custom.less">
<script src="https://cdn.jsdelivr.net/npm/less"> </script>

Now the above LESS js converts the LESS custom stylesheet into regular css when the page loads

How to Import other LESS and CSS files ?

If LESS stylesheet grows very large then might want to split it into several .less files. We can import them individual .less files into a main stylesheet using the @import directive:

@import "common.less";

Variables:

It makes code easier to maintain by giving a way to control those values and rules once from a single location then reuse them throughout our stylesheet.

Declaring variables:
@body-bg:rgb(0, 93, 186);
@text-color:#fff;
@imgs-path:'../images';
Usage:
body{
    background-color: @body-bg;
    background-image: url("@{imgs-path}/bg.png");
    color:@text-color;
}

Mixins:

As well as reusing values with variables, we can reuse whole blocks of CSS throughout our stylesheet.

Any CSS ruleset that uses a class or id or element selector can be mixed into any other ruleset. We mix a ruleset CSS into another simply by including the first ruleset selector within the second ruleset. Here is an example…

Mixin rule set:
.rounded-box() {
    border: 1px solid #309296;
    background-color: #eee;
    border-radius: 5px;
    padding: 10px;
}
Including mixin in another selector:
.blockquote {
 	font-size: 1.5em;
 	.rounded-box();
}

We can also use n number of parameters to mixins for making them behave more like functions. Here is an example...

Mixin rule set with parameters:
.rounded-box(@border-color, @border-radius) {
    border: 1px solid @border-color;
    background-color: #eee;
    border-radius: @border-radius;
    padding: 10px;
}
Including mixin in another selector and passing values:
.blockquote {
    font-size: 1.5em;
    .rounded-box(#309296, 5px);
}

Grouping stuff by namespaces:

We can group variables and mixins in a namespace to keep them separate from other rulesets. This can be handy if we have a lot of LESS rules or include multiple LESS stylesheets to avoid naming clashes.

.rounded-box-main{
    border: 1px solid #309296;
    background-color: #eee;
    border-radius: 5px;
    padding: 10px;
    .rounded-box-inner{
        border: 1px solid #309296;
        .rounded-box-inner{
            padding: 10px;
        }
    }
}

Pre compiling LESS code into CSS

The one drawback with LESS is that it required JavaScript to enabled in the browser. If JavaScript is turn off or the browser can’t run JavaScript then the page will look messy.

Benefits of using LESS

  • Less is a CSS pre-processor and after compilation it converts regular CSS which works across the browser.
  • Cleaner structure due to the use of Nesting
  • Less is time saving as compared to CSS
  • Coding is faster because the list of operators provided by Less
  • Using Mixins resolves the reusability of code and embed all the properties of a class into another class by simple including the class name as one of its properties.
  • Can import many LESS files in a LESS file, which may have variables define and then use that variables in imported Less file
  • Less compiles faster than any other pre-processor of CSS
  • It supports Lazy Loading feature i.e. in the file we can define variables anywhere, like before or after the use of variable.