LESS CSS is a CSS extension that allows you to add dynamism to traditional CSS; in other words LESS CSS results in an extension of the Cascading Style Sheets known as CSS.

What's new about LESS CSS that traditional CSS doesn't have?

LESS CSS has characteristics of programming languages such as the use of functions and variables that, although it may sound "little", are of great help when the Cascading Style Sheet (CSS) grows.

LESS has many characteristics that make it special and when combined they result in many more; in the following posts about LESS CSS we will see its main characteristics.

How do you install LESS CSS?

LESS CSS runs on both sides; that is, both client-side with JavaScript or server-side with Node.js.

How to use LESS CSS on client side?

In my opinion, the easiest way to start using LESS CSS is on the client side; just by including our .less Style Sheet; for example style.less.

<link rel="stylesheet/less" type="text/css href="less/style.less" />

And then include the less.js available here in our HTML document.

<script src="less.js" type="text/javascript"<>/script> 

How does it work?

Simply, the JavaScript file translates our Style Sheet with the .less extension (which is what we generate) to .css when the page loads.

In this way we can use LESS CSS in a simple way; Of course, this mode is only recommended for development environments; For the production environment, it is recommended to directly place the CSS already generated by the LESS CSS JavaScript.

Other ways to use LESS CSS?

We have several options for compiling the .less files; we can use programs like simpLESS; install it via npm; or use a compiler on the web like the one available on the official website of LESS CSS.

What does LESS CSS offer?

Variables in LESS CSS:

Variables in LESS CSS have similar behavior to constants in any programming language; allow you to specify values used throughout the Style Sheet in one place; that is, they can be easily reused anywhere in the .less Style Sheet. More.

@variable: valor;  

Mixins in LESS CSS:

Mixins allow you to embed all the properties of a class in another class by simply including the name of the class as one of its properties, in other words, it allows you to inherit the content defined in the Mixins in other classes; In addition to this, they allow you to receive parameters to enhance its use by changing parameters such as colors, sizes, etc.: More.

.esquinas-redondeadas () {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }

  header {
    .esquinas-redondeadas;
  }  

By compiling the previous LESS code we will obtain:

header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
  }

Internal rules in LESS CSS:

Allows nesting selectors inside other selectors; Although at first it may be a bit complicated, it is a very useful feature, since it allows you to better organize the Style Sheet document and reduce its size.

    section article{
    h3 {
       color: #0BF;
       font-size: 22px;
       font-weight: bold;
    }
    p { 
      margin: 35px 0 40px 70px;
      text-indent: 0;
      a { 
        color: #0BF;
        text-decoration: none;
      }
    }
  }

By compiling the previous LESS code we will obtain:

 section article h3 {
    color: #0BF;
    font-size: 22px;
    font-weight: bold;
  }
  section article p {
    margin: 35px 0 40px 70px;
    text-indent: 0;
  }
  section article p a {
    color: #0BF;
    text-decoration: none;
  }

Operations in LESS CSS

With Operations in LESS CSS you can add, subtract, divide and multiply property values as if they were simple numbers; Although it may not sound like much to us, when we design our Style Sheet we will realize that there are always values that are repeated but with different tones or sizes (for example in the CSS pseudo class:hover); Here we will find great help for LES CSS Operations:

@azul: #0BF;;

a {
  color: (@azul * 3);
}   

By compiling the previous LESS code we will obtain:

a {
    color: #00ffff;
  }     

Conclusion

LESS CSS is a powerful and widely used tool that makes it easy to develop Cascading Style Sheets for our web application, web pages, etc.; which, as I have been saying, greatly facilitates and allows you to organize the Cascading Style Sheets.