Learn less in minutes

CSS preprocessors are very easy to learn and although each one has its secrets, its use is very similar to that of standard CSS, of course with the difference that you have to compile them in case you don't know what preprocessors are here you can discover it

Compiler

Less is a compiled language so we must use a tool to compile it (there are many ways to compile and also many compilers), in this case, we will use Prepross

To install prepross what you have to do is enterhere.

And you select your operating system and then run the installer and when you're done just drag the project to the compiler to bind it and voila you have the compiler, which you can use for other preprocessors like less, sass, stylus, and pug among others.

Why learn less?

There are many preprocessors but less is one of the most used, besides it has a very easy-to-understand and use syntax.

Sintaxis

• Use of variables:

///variables
@primary-color: #050a30

main {
  background-color: @primary-color; 
}

• Imports: In the preprocessors, nesting is worked a lot to modulate the code and make it easier to read.

///Do we place to import styles?
@import "./style/desktop.less";

• nesting Nesting is instead of placing

main, p {
 font-size: 1.6rem;
}

This makes it much easier to read the code as well as making it more efficient.

main{
  p {
    font-size: 1.6rem;
  }
}

///With BEM methodology
///what & does is take the name of the parent and put it there so the converted would be about__text, use it it will save you a long time

about {
  &__text {
     p {

     }
  {
}

• Mixins: Is to place styles inside a variable to reuse them.

///We put it in the place of the variables.
.font-size {
  font-size: 1.6rem;
  font-weight: 100;
}

// It would be placed inside the styles.
main {
   p {
      .font-size
   }
}

Less still has more secrets that you can discover but for now, you can start using less in your projects at a basic level, I also recommend you follow me to see the post to learn Sass and Pug.