LESS.js Cheatsheet

---

---

This LESS cheatsheet provides a concise reference to key LESS concepts, including variables, mixins, nesting, and advanced styling techniques. It covers topics such as functions, loops, guarded mixins, and property merging with practical code examples. Designed to help developers write modular, maintainable, and scalable stylesheets, this guide serves as a quick resource for leveraging the full power of LESS in modern web development.

Table of Contents

1. Introduction
2. Variables
3. Nesting
4. Imports
5. Mixins

• Basic Mixins
• Mixins with Default Arguments
• Mixin Rulesets
• Mixin Guards/Conditions
• Mixins as Functions

Scope

Extends and Namespaces

Variable Interpolation

Named Variables

Loops

Merging Properties

• With Comma
• Without Comma

Parent Selectors

Functions

Lazy Loading

Custom Functions

Guarded Mixins

Escaping

Introduction

Less is one of the most popular CSS preprocessors that brings great functionality such as variables, nested rules, mixins, and functions to plain CSS, thus making the style sheets more readable and maintainable. It translates into ordinary CSS, which can easily be built with all the existing browsers in the marketplace.

Variables

Variables in LESS allow you to store reusable values such as colors, sizes, and font styles. This improves maintainability and consistency across stylesheets.

@primary-color: blue;
@secondary-color: @primary-color;

Nesting

Nesting allows you to structure styles hierarchically, making it easier to maintain and understand relationships between selectors.

.container {
  color: black;
  .child {
    color: white;
  }
}

Imports

LESS supports importing external files, enabling modular and reusable stylesheets. 

@import "path/to/file.less";

Mixins

Mixins allow reusable groups of styles to be applied across different elements.

Basic Mixins

A simple mixin can be used to apply a set of styles repeatedly. It acts as a function that inserts properties when called.

.button-style() {
  background: black;
  color: white;
}

Mixins with Default Arguments

Mixins can accept parameters, allowing dynamic styling. Default values can be set for optional arguments.

.box(@color; @background: blue) {
  color: @color;
  background: @background;
}

Mixin Rulesets

Mixin Rulesets can be stored as variables and used within mixins, providing flexibility in managing styles.

@text-style: {
  font-size: 16px;
  color: gray;
};

Mixin Guards/Conditions

Mixin Guards allow conditional logic within mixins, ensuring styles are applied only when conditions are met.

.text(@size) when (@size > 16px) {
  font-size: @size;
}

Mixins as Functions

Mixin as functions like functions, mixins can be nested, can accept parameters, and return values too.

.text-size() {
  @font-size: 14px;
}

Scope

LESS follows a scope variable system, where variables declared within a block are not accessible globally.

@global-color: red;
.component {
  @local-color: blue;
  color: @local-color;
}

Extends and Namespaces

Extending allows one selector to inherit styles from another, reducing redundancy. Namespaces help in organizing mixins.

.profile {
  color: red;
}
.user {
  &:extend(.profile);
}

Variable Interpolation

Variables Interpolation in LESS allows the use of variables inside selectors and property names, making styles more dynamic and flexible.

@direction: left;
.box {
  margin-@{direction}: 10px;
}

Named Variables

Named variables allow the use of a variable as a property name, improving reusability and reducing hardcoded values.

@property: "color";
.value {
  @@property: blue;
}

Loops

LESS supports loops to generate repetitive styles dynamically. This is useful for grid systems and scalable designs.

.loop(@i) when (@i > 0) {
  .loop(@i - 1);
  width: @i * 10px;
}

Merging Properties

LESS allows properties to be merged with or without commas, reducing redundancy and improving code clarity.

Merge with Comma

.box-shadow() {
  box-shadow+: inset 0 0 10px black;
}

Merge without Comma

.box-shadow() {
  box-shadow+_: inset 0 0 10px black;
}

Parent Selectors

The parent selector (&) allows styles to reference the parent element dynamically, making nested rules more expressive.

.link {
  &:hover {
    color: green;
  }
  & + & {
    color: red;
  }
}

Functions

LESS provides built-in functions for calculations, color manipulations, and string operations, enhancing styling capabilities.

@color: lighten(#ff0000, 10%);
@result: ceil(4.5);
@substring: extract("hello", 1);

Lazy Loading

LESS supports lazy loading of variables, where values are resolved at the time of use, preventing errors due to undefined variables.

@var: 10px;
.mixin(@padding: @var) {
  padding: @padding;
}
.test {
  .mixin();
}

Custom Functions

Create user functions for reusable logic.

.square(@value) {
  width: @value * @value;
}
.box {
  .square(10);
}

Guarded Mixins

Use conditions (when) to control mixin execution

.mixin(@width) when (@width > 100px) {
  width: @width;
}
.box {
  .mixin(120px);
}

Escaping

Escaping uses ~"string" to include raw CSS or JavaScript in Less output

@escaped: ~"calc(100% - 20px)";
.box {
  width: @escaped;
}