Less - Command Line Usage

Less - Command Line Usage

The Less compiler can be invoked from the command line using lessc. This allows you to compile .less files into .css files, making it suitable for scripting and integration with build tools.

Installation for Command Line Use

To use lessc, you first need to install Less globally or as a project dependency using npm (Node Package Manager), which comes with Node.js.

Global Installation:

npm install less -g

This makes the lessc command available system-wide. While convenient for direct use, for project-specific dependencies, local installation is generally preferred to ensure version consistency across environments.

You can install a specific version globally using npm install less@<version> -g (e.g., npm install less@4.1.3 -g).

Local (Project) Installation (Recommended):

npm install less --save-dev
# or using the shorter alias -D
npm install less -D

This installs Less as a development dependency for your current project and adds it to your package.json. You can then run lessc via npm scripts (e.g., npx lessc ...) or by directly pathing to node_modules/.bin/lessc.

Beta/Development Versions:

To install pre-release versions (e.g., beta): npm install less@beta --save-dev. To install directly from a Git repository (for testing unreleased changes): npm install less/less.js#commit-sha-or-branch --save-dev.

Basic Command Line Usage

The basic syntax for lessc is:

lessc [options] <source_file.less> [destination_file.css]

If destination_file.css is omitted, the CSS output is sent to stdout. If source_file.less is a hyphen (-), input is read from stdin.

Example: Compile style.less to style.css

lessc style.less style.css

Example: Compile and Minify

lessc --compress style.less style.min.css

Note: While Less provides basic compression with --compress (alias -x), for production builds, it’s common to use PostCSS with plugins like cssnano for more advanced CSS optimization after Less compilation.

Common lessc Options

The lessc command offers various options. For a full list, run lessc --help. Here are some common ones:

Option	Alias	Description	Example Command
--help	-h	Displays help message with all options.	lessc --help
--version	-v	Displays the Less compiler version.	lessc -v
--include-path=PATHS		Specifies a list of paths to search for @imported files. Separate paths with : (Linux/macOS) or ; (Windows).	lessc --include-path=lib;shared styles.less
--compress	-x	Removes unnecessary whitespace to compress output. For advanced minification, consider tools like cssnano.	lessc --compress main.less main.min.css
--source-map[=FILENAME]		Generates a source map. If FILENAME is omitted, it’s inferred from output CSS. Creates a separate .map file.	lessc --source-map style.less style.css
--source-map-map-inline		Embeds the source map directly into the output CSS file as a data URI.	lessc --source-map-map-inline style.less style.css
--source-map-less-inline		Embeds all Less source files directly into the source map (useful if original .less files won’t be on the server).	lessc --source-map --source-map-less-inline style.less style.css
--source-map-rootpath=URL		Specifies a root path to be prepended to source file paths in the source map.	lessc --source-map --source-map-rootpath=/app/src/ style.less
--source-map-basepath=PATH		Specifies a base path to be stripped from source file paths in the source map.	lessc --source-map --source-map-basepath=src/less/ style.less
--global-var='NAME=VALUE'		Defines a global variable. Can be specified multiple times.	lessc --global-var='brand-color=blue' style.less
--modify-var='NAME=VALUE'		Modifies a variable, effectively overriding it as if declared at the end of the file.	lessc --modify-var='font-size=14px' style.less
--url-args='ARGS'		Appends a query string (ARGS) to every URL. Useful for cache busting.	lessc --url-args='v=1.2.3' style.less
--strict-math=on|off	-sm=on|off	Controls math strictness. Default is on (since Less v4), requiring parentheses for most operations. Use --strict-math=off for legacy behavior.	lessc --strict-math=on style.less
--strict-units=on|off	-su=on|off	If on, Less validates units in expressions (e.g., 1px + 1em would error). Default is off.	lessc --strict-units=on style.less
--lint	-l	Checks syntax and reports errors without generating output CSS.	lessc --lint style.less
--no-js		Disables JavaScript evaluation within Less files (inline JavaScript).	lessc --no-js style.less
--plugin=NAME[=OPTIONS]		Loads a Less plugin. Example: lessc --plugin=less-plugin-autoprefix. Some plugins might have shorthand flags.	lessc --plugin=less-plugin-clean-css="advanced" style.less

Practical Application & Tips

• NPM Scripts: Integrate lessc commands into your package.json scripts for easy and consistent execution (e.g., "scripts": { "build:css": "lessc styles/main.less public/css/main.css --source-map" }). Then run with npm run build:css.
• Watch Mode: lessc itself does not have a built-in watch mode. For automatic recompilation on file changes, use tools like nodemon, chokidar-cli, or dedicated Less watchers like less-watch-compiler, often configured within npm scripts.
• Example using nodemon: nodemon --watch src/less --ext less --exec "lessc src/less/main.less dist/css/main.css"
• Combining with other tools: lessc output can be piped to other command-line tools (e.g., PostCSS for autoprefixing or further minification if not using Less plugins for these tasks): lessc style.less | postcss --use autoprefixer -o style.post.css.
• Understanding Source Maps: Source maps are crucial for debugging. When inspecting an element in browser developer tools, it will point to the original .less file and line number, not the compiled .css, greatly simplifying the debugging process.