Technical Solution

LESS a CSS Preprocessor, How it will help in your CSS coding?

Tintu.manuel | | 2 min read

As we know CSS is an important part in Front end development. By using CSS latest versions, we can make good dynamic effects just like jQuery effects. But sometimes we are spending lots of time to fix some cross browser issues or to modify some styling changes. And if you want to modify the common styling, we have to write many coding in CSS. But if you are using some preprocessors like LESS it will make the CSS coding easily because we can add the code with a small effort. There are many advantages when you use a preprocessor like LESS or SASS. Just we need to install the LESS and a compiler which compiles the less file into CSS. For more details you can refer http://lesscss.org

How to start using LESS and what are the advantages?

First we have to create a new CSS file and a less file with the same naming. For eg: style.css and style.less. And add both files in a compiler. Then add your CSS coding in your less file. And when you save the changes in less file the CSS file will be generating and updating for each saving.

Please have a look the below code to understand about coding in LESS 

 
//Define colors
@black: #000;
@white: #fff;

body.front {
  #main-wrapper {
    #header-wrapper {
      h1, h2, h3, h4, h5, h6 {
        color: @white;
      }
      ul, p, a {
        color: @black;
      }
    }
  }
}

Starting working with LESS is simple. And it has many advantages. some of them I have listed below.

  • Using less we can set the variables so that we can reduce the CSS code as minimum and can avoid code repeating.
  • Can save time since if we want to edit a code, need to change it only one place.
  • With one-time code change can get the change for a whole site or in a section. So we can save time and effort.
  • The group wise coding can avoid same code repeating multiple times and can reduce CSS file size.
  • The generating CSS file from LESS will be properly indented and aligned.

After coding in LESS the file should compile to the CSS. For that, we need a compiler. koala is one of the compilers which we can install in Ubuntu platform. Add the CSS and LESS file into the compiler and compile it. And the CSS​ will be updated with our latest LESS file.

If you have any doubts, please feel free to get in touch with us. Also, you may look into other articles related to CSS over here.

 

 

Related Topics