What is a Less file?

Question

I've started working newly on the React library. In the entire codebase that I've to work upon, I see *.less files which contain classes related to styles just as we used to have in CSS files for HTML/JavaScript pages.

How is a .less file any different from the conventional CSS style sheets? Can we also use *.css files with *.JSX files for styling purposes?

Answer 1

Less is basically a CSS-like language with additional capabilities that can be compiled to CSS using a preprocessor.

Examples of these additional capabilities are:

Variable definition. Suppose you have a color scheme to follow on your web site/application and need to keep reusing that same color, you can store that color in a variable and keep using it everywhere (instead of having to remember the hexadecimal code say).

    @nice-blue: #5B83AD;

    #header {
      color: @nice-blue;
    }

Suppose later you want to change the color, you can simply change the variable instead of going through all the CSS and changing the manually.

There are also other neat stuff like loops, etc. You can check their documentation for more information.

Another popular preprocessor you can check out is Sass.