What is LESS CSS? and first steps

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.

How to use Mixins in LESS CSS?

Many times when we work with style sheets we have to repeat CSS rules throughout the document:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

This becomes a real headache when the Style Sheet grows or if we decide to change some CSS rules; since we would have to review the entire Style Sheet and make said change, such as if we decided to no longer use rounded edges or change the measurements of said property.

LESS CSS Mixins

With LESS CSS Mixins we can embed all the properties of a class in another class by simply including the class name as one of its properties; It works in a very similar way to variables but with entire classes; If we wanted to generate the rules above, we could do something like this:

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

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas;
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

This is one of the most interesting properties that LESS CSS offers us since it allows the content of these classes to be inherited from other classes and thus avoids the repetition of CSS rules and organizing the Style Sheet.

LESS CSS Mixins with parameter passing

Now for our small example, what happens if we want the measurements of the edges of the header to be different from those of the footer?

We can do something like this:

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

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas(10px);
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

By compiling the previous LESS code we will obtain:

header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

As we saw in this last example, Mixins in LESS CSS can also behave like functions, and take arguments which allows their operation to be enhanced.

How to use Variables in LESS CSS?

If you have worked even a little with Cascading Style Sheets (CSS) it is very likely that you have done something like the following:

.clase1 {  
    background: #000;  
}  
.clase2 {  
    background: #FFF;  
    color: #000;  
}  
.clase3 {  
    border: 1px solid #000;  
	color: #F00; 
} 

Clearly, we see that there are repeated values throughout the CSS above; If we wanted to change (for example) the color black (#000) for some other color such as red (#F00) we would have to apply the change in three different places (for our example).

Las Variables en LESS CSS

Things get quite complicated when the Style Sheet grows and you would like to make a complete change to it; For this LESS CSS offers us the use of Variables.

Variables in LESS CSS work exactly like any variable in any programming language; that is, variables allow you to specify the values used in a single place and be able to use them throughout the Style Sheet. This has the advantage that global changes can be resolved as easily as changing a line of code; the value of the variable itself:

@color: #000;  
  
.clase1 {  
    background: @color;  
}  
.clase2 {  
    background: #fff;  
    color: @color;  
}  
.clase3 {  
    border: 1px solid @color;  
	color: #F00; 
} 

By compiling the previous LESS code we will obtain:

.clase1 {
  background: #000000;
}
.clase2 {
  background: #fff;
  color: #000000;
}
.clase3 {
  border: 1px solid #000000;
  color: #F00;
}

Variable Values in LESS CSS

We can define LESS CSS Variables with practically any value:

@color: 1px solid black;  
  
.clase1 {  
   border: @color;  
}  
.clase3 {  
  border: 1px solid @color;  
	color: #F00; 
} 

By compiling the previous LESS code we will obtain:

.clase1 {
  border: 1px solid #000000;
}
.clase3 {
  border: 1px solid 1px solid #000000;
  color: #F00;
}

Even text:

@contenido: "mi contenido";  
  
.clase1.before {  
  content: @contenido
} 

By compiling the previous LESS code we will obtain:

.clase1.before {  content: "mi contenido"; }

Variables as values for Variables in LESS CSS

It is also possible to define variables with a variable name:

@contenido: "mi contenido";  
@agregado: "contenido";
  
.clase1.before {  
  content: @@agregado;
} 

By compiling the previous LESS code we will obtain:

.clase1.before {
  content: "mi contenido";
}