Less

https://lesscss.org
Admin
Less is a backwards-compatible CSS preprocessor that adds variables, mixins, nesting, functions, and...
Tokens:96,017
Snippets:762
Trust Score:9.9
Update:1 day ago
Show doc for...
Tokens:
Raw
### Plugin file with install function (my-plugin.js)

Source: https://lesscss.org/features/

A minimal plugin file example showing the install function and functions.add. Note that other Node.js CommonJS conventions like require() are not available in the browser.

```javascript
// my-plugin.js
install: function(less, pluginManager, functions) {
    functions.add('pi', function() {
        return Math.PI;
    });
}
// etc
```

--------------------------------

### image-size function example

Source: https://lesscss.org/functions/

Gets the image dimensions from a file. The example shows image-size("file.png") returning 10px 10px. Note: only available in the node environment.

```less
image-size("file.png");
```

--------------------------------

### image-width function example

Source: https://lesscss.org/functions/

Gets the image width from a file. The example shows image-width("file.png") returning 10px. Note: only available in the node environment.

```less
image-width("file.png");
```

--------------------------------

### % format function examples

Source: https://lesscss.org/functions/

Formats a string with placeholders. The example shows four variations using %a, %d, %s, %S placeholders and their outputs.

```less
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
```

```less
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
```

--------------------------------

### mix examples and output

Source: https://lesscss.org/functions/

Mix two colors with optional weight; opacity is included. Examples show RGB and RGBA mixing with outputs.

```less
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
```

```text
#800080
rgba(75, 25, 0, 0.75)
```

--------------------------------

### Inline import example

Source: https://lesscss.org/features/

Example of using @import (inline) to include a file without processing it.

```less
@import (inline) "not-less-compatible.css";
```

--------------------------------

### image-height function example

Source: https://lesscss.org/functions/

Gets the image height from a file. The example shows image-height("file.png") returning 10px. Note: only available in the node environment.

```less
image-height("file.png");
```

--------------------------------

### Less import example

Source: https://lesscss.org/features/

Example of using @import (less) to treat a file as Less regardless of its extension.

```less
@import (less) "foo.css";
```

--------------------------------

### Optional import example

Source: https://lesscss.org/features/

Example of using @import (optional) to allow importing a file only when it exists.

```less
@import (optional) "foo.less";
```

--------------------------------

### Multiple import example and output

Source: https://lesscss.org/features/

Example of using @import (multiple) to allow importing the same file multiple times, with the resulting output.

```less
// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
```

```css
.a {
  color: green;
}
.a {
  color: green;
}
```

--------------------------------

### Once import example

Source: https://lesscss.org/features/

Example of using @import (once) to import a file only once, with subsequent imports ignored.

```less
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
```

--------------------------------

### CSS import example and output

Source: https://lesscss.org/features/

Example of using @import (css) to treat a file as CSS, leaving the import statement as is, and its output.

```less
@import (css) "foo.less";
```

```css
@import "foo.less";
```

--------------------------------

### tint function example and output

Source: https://lesscss.org/functions/

Example of using tint() with a hex color and an rgba color, followed by the corresponding output. The weight parameter is optional and defaults to 50%.

```less
no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%); 

```

```css
no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

```

--------------------------------

### Basic mixin call with switch parameter

Source: https://lesscss.org/features/

Shows a basic mixin definition and a call that passes a variable and a color. This is the starting point for pattern-matching examples.

```less
.mixin(@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}
```

--------------------------------

### shade function example and output

Source: https://lesscss.org/functions/

Example of using shade() with a hex color and an rgba color, followed by the corresponding output. The weight parameter is optional and defaults to 50%.

```less
no-alpha: shade(#007fff, 50%); 
with-alpha: shade(rgba(00,0,255,0.5), 50%); 

```

```css
no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

```

--------------------------------

### Output of @arguments example

Source: https://lesscss.org/features/

The compiled CSS from the @arguments example, showing that all arguments are combined into a single value for box-shadow.

```css
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}
```

--------------------------------

### Reference import example

Source: https://lesscss.org/features/

Example of using @import (reference) to import a file without outputting its styles unless referenced.

```less
@import (reference) "foo.less";
```

--------------------------------

### percentage example

Source: https://lesscss.org/functions/

Converts a floating point number into a percentage string. Example: percentage(0.5) returns 50%.

```less
percentage(0.5)
```

--------------------------------

### spin examples and output

Source: https://lesscss.org/functions/

Spin rotates hue angle; angles wrap modulo 360. Examples show positive and negative rotation with outputs.

```less
spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)
```

```text
#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)
```

--------------------------------

### Rewrite URLs example: main.less and global/fonts.less

Source: https://lesscss.org/usage/

Example files used to demonstrate rewriteUrls behavior. main.less imports global/fonts.less which contains a @font-face rule with a relative URL.

```less
/* main.less */
@import "global/fonts.less";
```

```less
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}
```

--------------------------------

### fade example

Source: https://lesscss.org/functions/

Sets absolute opacity. Example: fade(hsl(90, 90%, 50%), 10%) outputs rgba(128, 242, 13, 0.1).

```less
fade(hsl(90, 90%, 50%), 10%)
```

--------------------------------

### max() function examples

Source: https://lesscss.org/functions/

Shows the max() function returning the highest value from a list. The first example returns 10, the second returns 42%.

```less
max(5, 10);
```

```less
max(3%, 42%, 1%, 16%);
```

--------------------------------

### data-uri function examples

Source: https://lesscss.org/functions/

Inlines a resource and falls back to url() if ieCompat is on and the resource is too large, or in the browser. Examples show different mimetype and URL combinations with their outputs.

```less
data-uri('../data/image.jpg');
```

```less
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
```

```less
url('../data/image.jpg');
```

```less
data-uri('image/jpeg;base64', '../data/image.jpg');
```

```less
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
```

```less
data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
```

```less
url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");
```

--------------------------------

### if function example

Source: https://lesscss.org/functions/

Example of using the `if` function with a condition and two values. The condition `(2 > 1)` is true, so `margin` is `0`; `iscolor(@some)` is false, so `color` is `black`.

```less
@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
```

```css
div {
    margin: 0;
    color:  black;
}
```

--------------------------------

### min examples

Source: https://lesscss.org/functions/

Returns the lowest of one or more values. Examples: min(5, 10) returns 5, min(3px, 42px, 1px, 16px) returns 1px.

```less
min(5, 10);
```

```less
min(3px, 42px, 1px, 16px);
```

--------------------------------

### Output of scoped plugin usage

Source: https://lesscss.org/features/

CSS output produced by the previous Less example. Shows that .el-1 gets value: foo and .el-2 gets value: bar.

```css
.el-1 {
    value: foo;
}
.el-2 {
    value: bar;
}
```

--------------------------------

### luma function usage example and output

Source: https://lesscss.org/functions/

Example of using luma() to create a grey color, followed by the output. luma() returns a single value, not a color, so it is used with rgb().

```less
@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

```

```css
#cacaca
```

--------------------------------

### spin example - correct order

Source: https://lesscss.org/functions/

Correct usage: apply saturate before spin to preserve hue.

```less
@c: spin(saturate(#aaaaaa, 10%), 10);
```

--------------------------------

### contrast function example and output

Source: https://lesscss.org/functions/

Example of using contrast() with various arguments, followed by the corresponding output. The function compares colors using luma and can take optional dark, light, and threshold parameters.

```less
p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

```

```css
p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

```

--------------------------------

### range function with start, end, step

Source: https://lesscss.org/functions/

Generates a list with a start, end, and step. The output values have the same unit as the end value. Example: value: range(10px, 30px, 10); outputs value: 10px 20px 30px;

```less
value: range(10px, 30px, 10);
```

```less
value: 10px 20px 30px;
```

--------------------------------

### Using Less functions: percentage, saturate, lighten, spin

Source: https://lesscss.org/

Example showing how to use Less functions to convert a number to a percentage, saturate a color, and lighten and spin a color. The comments show the expected return values.

```less
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
```

--------------------------------

### Rewrite URLs local behavior example

Source: https://lesscss.org/usage/

Shows how rewriteUrls: 'local' only rewrites URLs that start with a dot. Relative URLs are rewritten, absolute ones stay unchanged.

```css
url('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2')
```

--------------------------------

### average function examples

Source: https://lesscss.org/functions/

Examples of the Less.js `average` function, which computes the per-channel RGB average of two colors. Each example shows a call with `#ff6600` and a different second color.

```less
average(#ff6600, #000000);
```

```less
average(#ff6600, #333333);
```

```less
average(#ff6600, #666666);
```

```less
average(#ff6600, #999999);
```

```less
average(#ff6600, #cccccc);
```

```less
average(#ff6600, #ffffff);
```

```less
average(#ff6600, #ff0000);
```

```less
average(#ff6600, #00ff00);
```

```less
average(#ff6600, #0000ff);
```

--------------------------------

### Advanced multiple default() usage

Source: https://lesscss.org/functions/

Illustrates advanced usage of default() with multiple mixin definitions and guard conditions. The example shows how default() selects the appropriate mixin for color and string inputs, with the result demonstrating the output for various calls.

```less
.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}
```

```css
.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}
```

--------------------------------

### negation function examples

Source: https://lesscss.org/functions/

Examples of the Less.js `negation` function, which performs the opposite effect of `difference` to produce a brighter color. Each example shows a call with `#ff6600` and a different second color.

```less
negation(#ff6600, #000000);
```

```less
negation(#ff6600, #333333);
```

```less
negation(#ff6600, #666666);
```

```less
negation(#ff6600, #999999);
```

```less
negation(#ff6600, #cccccc);
```

```less
negation(#ff6600, #ffffff);
```

```less
negation(#ff6600, #ff0000);
```

```less
negation(#ff6600, #00ff00);
```

```less
negation(#ff6600, #0000ff);
```

--------------------------------

### pi example

Source: https://lesscss.org/functions/

Returns π (pi). Example: pi() returns 3.141592653589793.

```less
pi()
```

--------------------------------

### Mixins example

Source: https://lesscss.org/

Shows how to define a mixin class .bordered and include it in other rule-sets using .bordered(). The properties are mixed into both #menu a and .post a.

```less
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
```

```less
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
```

--------------------------------

### lessc help options

Source: https://lesscss.org/usage/

Prints a help message with available options and exits. Both --help and -h are equivalent.

```bash
lessc --help
lessc -h
```

--------------------------------

### Install lessc globally with npm

Source: https://lesscss.org/usage/

Installs the lessc command globally using the -g flag. For a specific version, append @VERSION to the package name, e.g., npm install less@2.7.1 -g.

```bash
npm install less -g
```

--------------------------------

### floor example

Source: https://lesscss.org/functions/

Rounds down to the next lowest integer. Example: floor(2.6) returns 2.

```less
floor(2.6)
```

--------------------------------

### Compile bootstrap.less to bootstrap.css

Source: https://lesscss.org/usage/

Example command that compiles bootstrap.less into bootstrap.css.

```bash
lessc bootstrap.less bootstrap.css
```

--------------------------------

### spin example - incorrect order

Source: https://lesscss.org/functions/

Incorrect usage of spin with saturate on a grey color; hue is lost because saturate is applied after spin.

```less
@c: saturate(spin(#aaaaaa, 10), 10%);
```

--------------------------------

### ceil example

Source: https://lesscss.org/functions/

Rounds up to the next highest integer. Example: ceil(2.4) returns 3.

```less
ceil(2.4)
```

--------------------------------

### Preferred approach: Call mixins directly

Source: https://lesscss.org/features/

Recommended way to use mixins from a namespace: call them directly. The example defines a local .mixin-1() and then calls #ns.mixin-1() and .mixin-1(), producing prop-1, prop-2, and prop-3.

```less
#ns {
  .mixin-1() {
    prop-1: one;
    prop-2: two;
  }
}
.rule {
  .mixin-1() {
    prop-3: three;
  }
  #ns.mixin-1();
  .mixin-1();
}
/* OUTPUT:
.rule {
  prop-1: one;
  prop-2: two;
  prop-3: three;
}
*/
```

--------------------------------

### get-unit() function examples

Source: https://lesscss.org/functions/

Shows how get-unit() returns the units of a number. get-unit(5px) returns 'px', while get-unit(5) returns an empty value.

```less
get-unit(5px)
```

```css
px
```

```less
get-unit(5)
```

```css
//nothing
```

--------------------------------

### isurl() example

Source: https://lesscss.org/functions/

Returns true if the value is a url, false otherwise. The example shows that only a url() value is a url.

```less
isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true
```

--------------------------------

### iskeyword() example

Source: https://lesscss.org/functions/

Returns true if the value is a keyword, false otherwise. The example shows that only an unquoted identifier is a keyword.

```less
iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false
```

--------------------------------

### Importing .less and .css files

Source: https://lesscss.org/

Shows how to import a .less file without extension and a .css file with extension. The extension is optional for .less files.

```less
@import "library"; // library.less
@import "typo.css";
```

--------------------------------

### isstring() example

Source: https://lesscss.org/functions/

Returns true if the value is a string, false otherwise. The example shows that only a quoted string is a string.

```less
isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false
```

--------------------------------

### Import options syntax

Source: https://lesscss.org/features/

Shows the general syntax for using Less @import options, including the ability to combine multiple keywords with commas.

```less
@import (keyword) "filename";
```

```less
@import (optional, reference) "foo.less";
```

--------------------------------

### Using scoped plugins in Less

Source: https://lesscss.org/features/

Less example showing how to use the two plugins in different scopes. Each .el class loads a different plugin and calls foo(), producing different outputs.

```less
.el-1 {
    @plugin "lib1";
    value: foo();
}
.el-2 {
    @plugin "lib2";
    value: foo();
}
```

--------------------------------

### ispercentage() example

Source: https://lesscss.org/functions/

Returns true if the value is a percentage value, false otherwise. The example shows that only a value with % units is a percentage.

```less
ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false
```

--------------------------------

### Using retrieve function in Less

Source: https://lesscss.org/features/

Less example that loads the collections plugin and calls retrieve() to output the stored values.

```less
.get-my-values {
    @plugin "collections";
    values: retrieve();   
}
```

--------------------------------

### Reducing CSS Size: Mixin Example

Source: https://lesscss.org/features/

Shows a mixin .my-inline-block and two classes using it, followed by the CSS output that duplicates the properties in each class.

```less
.my-inline-block() {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}
```

```css
.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}
```

--------------------------------

### Install lessc as a dev dependency

Source: https://lesscss.org/usage/

Installs the latest official version of lessc into the project folder and adds it to devDependencies in package.json.

```bash
npm i less --save-dev
```

--------------------------------

### darken example

Source: https://lesscss.org/functions/

Decreases lightness by an absolute amount. Example: darken(hsl(90, 80%, 50%), 20%) outputs #4d8a0f.

```less
darken(hsl(90, 80%, 50%), 20%)
```

--------------------------------

### lighten example

Source: https://lesscss.org/functions/

Increases lightness by an absolute amount. Example: lighten(hsl(90, 80%, 50%), 20%) outputs #b3f075.

```less
lighten(hsl(90, 80%, 50%), 20%)
```

--------------------------------

### desaturate example

Source: https://lesscss.org/functions/

Decreases saturation by an absolute amount. Example: desaturate(hsl(90, 80%, 50%), 20%) outputs #80cc33.

```less
desaturate(hsl(90, 80%, 50%), 20%)
```

--------------------------------

### saturate example

Source: https://lesscss.org/functions/

Increases saturation by an absolute amount. Example: saturate(hsl(90, 80%, 50%), 20%) outputs #80ff00.

```less
saturate(hsl(90, 80%, 50%), 20%)
```

--------------------------------

### isruleset() example

Source: https://lesscss.org/functions/

Returns true if the value is a ruleset, false otherwise. The example defines a ruleset variable and then tests it against various values.

```less
@rules: {
    color: red;
}

isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false
isruleset(1234);     // false
isruleset(56px);     // false
isruleset(7.8%);     // false
isruleset(keyword);  // false
isruleset(url(...)); // false
```

--------------------------------

### isem() example

Source: https://lesscss.org/functions/

Returns true if the value is an em value, false otherwise. The example shows that only a value with em units is an em.

```less
isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false
```

--------------------------------

### Less nesting example

Source: https://lesscss.org/

Demonstrates how to write the same CSS using Less nesting, making the code more concise and mimicking HTML structure.

```less
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
```

--------------------------------

### ispixel() example

Source: https://lesscss.org/functions/

Returns true if the value is a number in pixels, false otherwise. The example shows that only a value with px units is a pixel.

```less
ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false
```

--------------------------------

### length function example

Source: https://lesscss.org/functions/

Returns the number of elements in a value list. Example: length(1px solid #0080ff); outputs 3.

```less
length(1px solid #0080ff);
```

--------------------------------

### Using store function in Less

Source: https://lesscss.org/features/

Less example that loads the collections plugin and calls store(@var) to store a value without output.

```less
@plugin "collections";
@var: 32;
store(@var);
```

--------------------------------

### color function example

Source: https://lesscss.org/functions/

Parses a string representing a color into a color. The example shows color("#aaa") returning #aaa.

```less
color("#aaa");
```
Tokens:
Raw