LESS Data Types

The Data Types LESS Supports

LESS values fall into a handful of categories: numbers (with or without a unit), colors, strings (quoted or unquoted), URLs, keywords/identifiers, and lists (comma- or space-separated). Understanding each type's behavior is essential for writing correct operations and functions.

Unlike a fully dynamic language, LESS doesn't require explicit type declarations, the type is inferred from how a value is written, and built-in functions like isnumber() or iscolor() can check a value's type inside a guard.

@count: 4;              // number, no unit
@radius: 8px;           // number, with unit
@brand: #2563eb;        // color
@label: "Save changes"; // quoted string
@icon: url(./icon.svg); // URL
@display: none;         // keyword
@sizes: 4px, 8px, 16px; // comma-separated list

Each of these values behaves differently in operations, string interpolation, and function calls.

Type Reference

Number:   4, 8px, 1.5em, 100%
Color:    #fff, #2563eb, rgba(0,0,0,.5), red
String:   "quoted", unquoted-keyword, ~"escaped"
URL:      url(path/to/file.svg)
Keyword:  none, inherit, auto
List:     a, b, c   OR   a b c

• Numbers can be unitless or carry a CSS unit like px, em, %, or rem.
• Colors can be written as hex, named keywords, or functional notation like rgba() and hsl().
• Strings can be quoted ("text") or unquoted identifiers; the tilde ~"..." syntax escapes a string from further LESS processing.
• Lists can be comma-separated or space-separated, and are used heavily with the each() function.

LESS Data Types Cheatsheet

Every value type LESS recognizes, with examples and type-check functions.

Numbers and Units

A LESS number can be unitless or carry a unit such as px, em, rem, %, deg, or s. Units matter during operations, LESS attempts sensible unit math, but mixing incompatible units (like adding pixels to seconds) has no meaningful result.

@a: 10px;
@b: 5;
@sum: @a + @b; // 15px, unitless value takes on the other operand's unit

Strings and Escaping

Quoted strings behave predictably, but sometimes you need to output a value LESS would otherwise try to interpret, like a raw CSS expression. The tilde syntax ~"..." (an escaped string) tells LESS to output the content exactly as written, without further processing.

@query: ~"(min-width: 768px)";

.sidebar {
  @media @query {
    width: 260px;
  }
}

Without the tilde escape, LESS would try to parse the parentheses as an expression rather than a literal string.

Lists in Depth

Lists are either comma-separated or space-separated. Both forms are valid CSS value syntax (like font: 16px/1.5 sans-serif or margin: 4px 8px), and LESS list functions like length() and extract() work with either.

@shadow-layers: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);
@spacing-scale: 4px 8px 16px 32px;

.card {
  box-shadow: @shadow-layers;
}

Common Mistakes

• Forgetting to quote a string value that contains special characters, causing a parse error.
• Adding two numbers with incompatible units and expecting an automatic, meaningful conversion.
• Not escaping a raw expression (like a media feature) with ~"..." and getting an unexpected parse error.
• Confusing a comma-separated list with multiple mixin arguments when passing it as a single value.

Key Takeaways

• LESS values fall into number, color, string, URL, keyword, and list types.
• Units affect operations; LESS attempts sensible conversions between compatible units.
• The tilde syntax ~"..." escapes a string, telling LESS to output it exactly as written.
• Lists can be comma- or space-separated, and both are valid, usable list values.