atom-less package

An Atom package that auto-compiles LESS files on save, with support for LESS plugins, Clean-CSS and AutoPrefixer.

UNMAINTAINED

I'm sorry but the code hasn't been updated in a long time, since I am no longer using Atom, and therefore not maintaining the code anymore or publishing new versions.

Sorry about that. If you would like to take ownership of the code and plugin, please open a new issue.

Configuration

On the first line of LESS files, add a valid JSON comment, not including the outer brackets ('{' and '}'), with the following properties:

"main": string - The relative or absolute path to the main LESS file to be compiled (ignores all other options)
"out": boolean|string - true to output using the filename, or a string specifying a name to use
"compress": boolean - Use Less.JS built-in compression (not compatible with Clean-CSS or Source Maps)
"strictMath": boolean - Require brackets around math expressions
"sourceMap": boolean|Object - true to turn on source maps, or an object specifying LESS source map properties
"cleancss": string|object - a string specifying the 'compatibility' property, or an object specifying the Clean-CSS properties (not compatible with Source Maps)
"autoprefix": string|object - a string specifying the 'browsers' property, or an object specifying the AutoPrefixer properties

Other LESS compiler options might work but are untested at this point.

Advanced Options

Please see the Less documentation for sourcemap configuration options.

Please see the AutoPrefixer documention for configuration options.

Please see the Clean CSS documentation for configuration options.

Example

Say you have two Less files, main.less and component.less.

main.less defines the generated file name main.css, and also provides the other configurations, for example compression and AutoPrefixer options (see above for syntax):

// "out": "main.css", "compress": true, "autoprefix": "last 2 versions"

@import "component.less";

html, body {
    height: 100%;
}

component.less just indicates the file that imports it (in this case main.less) and defines its own styles:

// "main": "main.less"

component {
    border: solid 1px black;
}

Road Map