Working with LESS in ATOM

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.

scr1

Type less-autocompile and search for the package. The result will be something like below, click on install to install the package.

scr2

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.

scr3

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.

scr4

The same applied for responsive.less file as well.

scr5

The LESS file auto compiles the LESS file on save.

Sourcemaps:-

Source maps seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.

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

scr6

scr7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s