Language Features
- Less - Parent Selectors
- Less - Merge
- Less - Loops
- Less - CSS Guards
- Less - Mixin Guards
- Less - Import Options
- Less - Import Directives
- Less - Passing Rulesets to Mixins
- Less - Mixins as Functions
- Less - Parametric Mixins
- Less - Mixins
- Less - Extend
- Less - Variables
- Less - Importing
- Less - Comments
- Less - Scope
- Less - Namespaces and Accessors
- Less - Functions
- Less - Escaping
- Less - Operations
- Less - Nested Directives and Bubbling
- Less - Nested Rules
Functions
- Less - Color Blending Functions
- Less - Color Operation
- Less - Color Channel Functions
- Less - Color Defination Functions
- Less - Type Functions
- Less - Math Functions
- Less - List Functions
- Less - String Functions
- Less - Misc Functions
Usage
- Less - Frameworks
- Less - Third Party Compilers
- Less - Editors and Plugins
- Less - GUIs
- Less - Online Compilers
- Less - Programmatic Usage
- Less - Plugins
- Less - Browser support
- Using Less In The Browser
- Less - Command Line Usage
Less Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
LESS - Command Line Usage
Using the command pne, we can compile the .less file to .css.
Instalpng lessc for Use Globally
The following command is used to install lessc with npm(node package manager) to make the lessc available globally.
npm install less -g
You can also add a specific version after the package name. For example npm install less@1.6.2 -g
Instalpng for Node Development
The following command is used to install the latest version of lessc in your project folder.
npm i less -save-dev
It is also added to the devDependencies in your project package.json.
Beta releases of lessc
It is tagged as beta when the lessc structure is pubpshed to npm Here, the new functionapty is developed periodically. less -v is used to get the current version.
Instalpng an unpubpshed development version of lessc
The commit - ish is to be specified, when we proceed to install an unpubpshed version of lessc and the instructions need to be followed for identifying a git URL as a dependency. This will ensure that you are using the correct version of leesc for your project.
Server-Side and Command Line Usage
bin/lessc includes binary in the repository. It works with Windows, OS X and nodejs on *nix.
Command Line Usage
Input is read from stdin when source is set to dash or hyphen(-).
lessc [option option = parameter ...]
For instance, we can compile .less to .css by using the following command −
lessc stylesheet.less stylesheet.css
We can compile .less to .css by and minify the result using the following command.
lessc -x stylesheet.less stylesheet.css
Options
Following table psts out options used in command pne usage −
Sr.No. | Options & Description | Command |
---|---|---|
1 | Help Help message is displayed with the options available. |
lessc -help lessc -h |
2 | Include Paths It includes the available paths to the pbrary. These paths can be referenced simply and relatively in the Less files. The paths in windows are separated by colon(:) or semicolon(;). |
lessc --include-path = PATH1;PATH2 |
3 | Makefile It generates a makefile import dependencies pst to stdout as output. |
lessc -M lessc --depends |
4 | No Color It disables colorized output. |
lessc --no-color |
5 | No IE Compatibipty It disables IE compatibipty checks. |
lessc --no-ie-compat |
6 | Disable Javascript It disables the javascript in less files. |
lessc --no-js |
7 | Lint It checks the syntax and reports error without any output. |
lessc --pnt lessc -l |
8 | Silent It forcibly stops the display of error messages. |
lessc --silent lessc -s |
9 | Strict Imports It force evaluates imports. |
lessc --strict-imports |
10 | Allow Imports from Insecure HTTPS Hosts It imports from the insecure HTTPS hosts. |
lessc --insecure |
11 | Version It displays the version number and exits. |
lessc -version lessc -v |
12 | Compress It helps in removing the whitespaces and compress the output. |
lessc -x lessc --compress |
13 | Source Map Output Filename It generates the sourcemap in less. If sourcemap option is defined without filename then it will use the extension map with the Less file name as source. |
lessc --source-map lessc -source-map = file.map |
14 | Source Map Rootpath Rootpath is specified and should be added to Less file paths inside the sourcemap and also to the map file which is specified in your output css. |
lessc --source-map-rootpath = dev-files/ |
15 | Source Map Basepath A path is specified which has to be removed from the output paths. Basepath is opposite of the rootpath option. |
lessc --source-map-basepath = less-files/ |
16 | Source Map Less Inpne All the Less files should be included in the sourcemap. |
lessc --source-map-less-inpne |
17 | Source Map Map Inpne It specifies that in the output css the map file should be inpne. |
lessc --source-map-map-inpne |
18 | Source Map URL A URL is allowed to override the points in the map file in the css. |
lessc --source-map-url = ../my-map.json |
19 | Rootpath It sets paths for URL rewriting in relative imports and urls. |
lessc -rp=resources/ lessc --rootpath=resources/ |
20 | Relative URLs In imported files, the URL are re-written so that the URL is always relative to the base file. |
lessc -ru lessc --relative-urls |
21 | Strict Math It processes all Math function in your css. By default, it s off. |
lessc -sm = on lessc --strict-math = on |
22 | Strict Units It allows mixed units. |
lessc -su = on lessc --strict-units = on |
23 | Global Variable A variable is defined which can be referenced by the file. |
lessc --global-var = "background = green" |
24 | Modify Variable This is unpke global variable option; it moves the declaration at the end of your less file. |
lessc --modify-var = "background = green" |
25 | URL Arguments To move on to every URL, an argument is allowed to specify. |
lessc --url-args = "arg736357" |
26 | Line Numbers Inpne source-mapping is generated. |
lessc --pne-numbers = comments lessc --pne-numbers = mediaquery lessc --pne-numbers = all |
27 | Plugin It loads the plugin. |
lessc --clean-css lessc --plugin = clean-css = "advanced" |