Introduction
This chapter explains about command line uses, how to Install Lessc globally, Node development installation, Command line usage in Less along with examples, and Options for command line usage.
Description
The .less file can be compiled to .css file only by using the command line.
[c]lessc style.less style.css[/c]
Description
With the help of NPM (Node package manager), install LESS on server. To install, type the following command in the command prompt.
[c]npm install –g less[/c]
Add specific version after the package name as shown below.
[c]Npm install less@1.6.2 -g[/c]
Description
To install lessc latest version in the project folder, use the following command.
[c]npm I less –save-dev[/c]
Install the latest version lessc in the project folder and add the dev dependencies in the project package.json.
Description
The bin/lessc includes binary in this repository, works with Node js on OS X, Windows and *nix.
Command line Usage:
[c]lessc [option option=parameter ….] <source> [destination][/c]
Example
[c]# compile bootstrap.less to bootstrap.css
$lessc bootstrap.less bootstrap.css
#compile bootstrap.less to bootstrap.css and minify (compress) the result
$lessc –x bootstrap.less bootstrap.css[/c]
Options
Below table explains the options and command usage in Less.
| Options | Command |
|---|---|
| Help: By using this command, a help message is printed with available options and exits. | lessc --help lessc -h |
| Include Paths: By using this command, the available paths are included in the library, which one wants to refer simply and relatively in the less files. | lessc --include-path=PATH1;PATH2 |
| Makefile: By using this command, the dependencies list is imported to stdout. | lessc -m lessc --depends |
| No Color: By using this command, the disabled output get colorized. | lessc --no-color |
| No IE Compatibility: This command disables the IE Compatibility. Currently, it is only used for the data-uri function to check whether the images created are too large for the browser to handle. | lessc --no-ie-compat |
| Disable Javascript: By using this command, the javascript in less files get disabled. | lessc --no-js |
| Lint: By using this command, the syntax is verified and displays error without any output. | lessc --lint lessc -1 |
| Silent: This command stops the warnings to be shown. | lessc -s lessc --silent |
| Strict Imports: This command forces the evaluation of imports. | lessc --strict-imports |
| Allow imports from HTTPS Hosts: This command allows to import from the insecure HTTPS hosts. | lessc --insecure |
| Version: By using this command, the version number get displayed and exits. | lessc -version lessc -v |
| Compress: By using this command, the output get compressed and the whitespaces are removed. | lessc -x lessc --compress |
| Source Map Output Filename: By using this command, the source map gets generated in less. In case the source map is defined without a file name, it uses the source less file name with extension map. | lessc --source-map lessc --source-map=file.map |
| Source Map Rootpath: The command is used to specify the rootpath and add the less file paths inside the source map. It also maps the specified file in the output css. | lessc --source-map-rootpath=dev-files/ |
| Source Map Basepath: The command is used to remove the specified path from the output paths. The Basepath command is opposite to the Rootpath command. | lessc --source-map-basepath=less-files/ |
| Source Map Less Inline: The command is used to specify and include all the less files into the sourcemap. | lessc --source-map-map-inline |
| Source Map Map inline: The command used to specify the map file in the output css should be inline. | lessc --source-map-map-inline |
| Source Map URL: The command allows one to override the URL in CSS, which points at the map file. | lessc --source-map-url=../my-map.json |
| Roothpath: The command used to specify the map file in the output css should be inline. | lessc --source-map-map-inline |
| Relative Urls: The command allows one to re-write the URL's in imported files, through which the URL is always relative to the imported base file. | lessc -ru lessc --relative-urls |
| Strict Math: The command used to process all math functions in the output CSS and by default it is off. | lessc -sm=on lessc --strict-math=on |
| Strict Units: The command allows the mixed units and by default it is off. | lessc -su=on lessc --strict-units=on |
| Global Variable: The command used to define a variable, so that it can be referred by the file. | lessc--global-var="my-background=red" |
| Modify Variable: The modify Variable command is opposite of global variable command and puts the declaration at the end of a base file. | lessc --modify-var="my-background=blue" |
| URL Arguments: The command allows one to specify a argument to move to every URL, and for instance it is used for cache-busting. | lessc --url-args="arg736357" |
| Line Numbers: The command is used to generate the inline source mapping. | lessc --line-numbers=comments lessc --line-numbers=mediaquery lessc --line-numbers=all |
| Plugin: The command is used to load the plugin. | lessc --clean-css lessc --plugin=clean-css="advanced" |
Key Points
- Node.js package manager is mandatory to run Less files.
- Command lines are important to install NPM and to convert .less to .css.