ATOM is a open source text editor. Atom helps you write code faster with a smart, flexible autocomplete. You can visit https://atom.io/, download and install it. We are going to work with LESS in ATOM IDE.
Once installed we can begin with installing the less package. For that we need to visit File -> Settings and then the Install tab.
Type less-autocompile and search for the package. The result will be something like below, click on install to install the package.
Create a LESS file named main.less and add the below parameters on first line of the LESS file main.less preceded by a //
out (string): This is the path where the CSS file is to be created
sourcemap (bool): This creates a create sourcemap file. I will give more details about sourcemap later in the blog. It is a boolean value true or false.
compress (bool): This will provide us an auto compress CSS minified file. It is a boolean value true or false.
We usually have different modules of css represented inside separate less file. In our example we find variable.less file. In the variable.less file add the below parmeter on first line of LESS file preceded by a //
main (string): This is the path to our main LESS file to be compiled.
The same applied for responsive.less file as well.
The LESS file auto compiles the LESS file on save.
A comment is added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
This points to an additional file that was created during compilation: screen.css.map, which – as the name implies – is what maps all of the compiled CSS back to the source Sass declarations
To enable it in chrome follow the below screen