LESS Variables

What Are LESS Variables?

A LESS variable is declared with an at sign followed by a name, a colon, and a value, ending in a semicolon: @primary: #2563eb;. Once declared, you reference it anywhere a normal CSS value would go, simply by writing @primary.

Variables can hold colors, numbers with or without units, strings, keywords, and even entire lists of values, making them useful far beyond simple color and spacing tokens.

@primary: #2563eb;
@spacing-md: 1rem;
@font-stack: "Segoe UI", sans-serif;

.button {
  background: @primary;
  padding: @spacing-md;
  font-family: @font-stack;
}

All three variables are substituted with their literal values at compile time; the browser only ever sees the resolved CSS.

Variable Declaration Syntax

@name: value;

• Variable names are case-sensitive and may contain letters, numbers, and hyphens.
• Values can be colors, numbers, strings, URLs, keywords, or comma/space-separated lists.
• A variable can be re-declared later in the same scope; the last declaration wins.
• Variables declared inside a selector are scoped to that selector and its nested rules only.

LESS Variables Cheatsheet

Common variable declarations and usage patterns.

Variable Scope

LESS variables follow a scoping model similar to many programming languages: a variable declared inside a selector is local to that selector's block and any selectors nested within it. A variable of the same name declared outside remains unaffected.

@color: blue;

.widget {
  @color: green;
  span { color: @color; } // green, uses the local variable
}

.other { color: @color; } // blue, outer variable is untouched

Lazy Evaluation, In Brief

Unlike most languages, LESS resolves variables lazily: it doesn't matter whether a variable is declared before or after the line that uses it, as long as it's declared somewhere in the same scope. The final declaration in that scope is what gets used.

This topic is important enough to get its own dedicated lesson later in this course.

.box {
  width: @size; // resolves using the LAST @size below, not the first
}
@size: 10px;
@size: 20px;

The compiled width is 20px, LESS looks at the final value in scope, not declaration order.

Variable Variables

LESS supports a rarely needed but powerful feature: using the value of one variable as the name of another, written as @@name. This is useful for looking up a value dynamically based on a computed key.

@primary: blue;
@which: primary;

.box {
  color: @@which; // resolves to @primary, then to blue
}

Common Mistakes

• Forgetting the @ prefix when referencing a variable, causing LESS to treat the name as a plain CSS keyword.
• Assuming variables behave like constants; a later declaration in the same scope silently overrides an earlier one.
• Declaring a variable inside a selector and expecting it to be visible outside that selector's scope.
• Confusing LESS's compile-time @variable with native CSS's runtime --custom-property.

Key Takeaways

• Variables are declared with @name: value; and referenced as @name.
• Variables can hold colors, numbers, strings, URLs, keywords, and lists.
• LESS variables are scoped, and follow lazy evaluation: the last declaration in scope wins.
• @@name (a variable variable) looks up a variable whose name is itself stored in a variable.