Less CSS - SPLessons

Chapter 15

Less Command line Uses

Less Command line Uses

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.


The .less file can be compiled to .css file only by using the command line.

lessc style.less style.css

How to install lessc Globally?

With the help of NPM (Node package manager), install LESS on server. To install, type the following command in the command prompt.

npm install –g less

Add specific version after the package name as shown below.

Npm install less@1.6.2 -g

Node development installation

To install lessc latest version in the project folder, use the following command.

npm I less –save-dev

Install the latest version lessc in the project folder and add the dev dependencies in the project package.json.

Server-Side and command line usage

The bin/lessc includes binary in this repository, works with Node js on OS X, Windows and *nix.

Command line Usage:

lessc [option option=parameter ….] <source> [destination]

# 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

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”

Summary

  • Node.js package manager is mandatory to run Less files.
  • Command lines are important to install NPM and to convert .less to .css.