Less - Variables

LESS - Variables: The Foundation of Reusable Styles

Variables are a cornerstone feature of LESS, allowing you to define reusable values that can be applied throughout your stylesheets. This promotes consistency, makes maintenance easier, and is fundamental for creating themes or configurable design systems.

What are Variables in LESS?

In LESS, variables are identified by an @ symbol followed by a name, and a value is assigned using a colon (:).

@primary-color: #337ab7;
@base-font-size: 16px;
@default-padding: 1em;
@site-font-stack: Helvetica, Arial, sans-serif;

Once defined, you can use these variables anywhere in your LESS files where a value is expected.

body {
  font-family: @site-font-stack;
  font-size: @base-font-size;
  color: darken(@primary-color, 20%);
}

.button-primary {
  background-color: @primary-color;
  padding: @default-padding;
  color: white;
}

Variable Interpolation

Variables can also be used in selector names, property names, URLs, and @import statements through interpolation. The syntax for interpolation is @{variable-name}.

Selector Names:

@my-selector-prefix: "widget";

.@{my-selector-prefix}-box {
  border: 1px solid #ccc;
}
// Compiles to: .widget-box { border: 1px solid #ccc; }

Property Names (Less Common):

@border-style-prop: "border-style";
@border-value: "dotted";

.element {
  @{border-style-prop}: @border-value;
}
// Compiles to: .element { border-style: dotted; }

URLs:

@image-path: "/assets/images";

.icon {
  background-image: url("@{image-path}/icon.png");
}
// Compiles to: .icon { background-image: url("/assets/images/icon.png"); }

@import Statements:

@theme-name: "dark";

@import "themes/@{theme-name}-theme.less";
// Tries to import a file named "themes/dark-theme.less"

Variable Scoping

LESS variables have lexical (or static) scope, similar to JavaScript. A variable is first looked for in the current local scope. If not found, LESS looks up the scope chain until the variable is found or the global scope is reached.

@global-var: red;

.section {
  @local-var: blue;
  color: @local-var;   // Uses blue
  border-color: @global-var; // Uses red

  .subsection {
    @local-var: green; // Shadows .section's @local-var
    background-color: @local-var; // Uses green
    border-top-color: @global-var; // Still uses red from global scope
  }

  // After .subsection, @local-var is still blue within .section
  padding-left-color: @local-var; // Uses blue
}

Lazy Evaluation (The “Last Declaration Wins” Rule)

LESS employs lazy evaluation for variables. This means variables are not assigned their final value until they are actually used in a property or mixin. If a variable is defined multiple times within the same scope or an imported scope, the last definition encountered before its use will be the one that applies. This is crucial for how LESS handles defaults and overrides.

Example 1: Simple Override

@color: black;
@color: orange; // This is the last definition before .my-element

.my-element {
  color: @color; // Compiles to color: orange;
}

@color: blue; // This definition is too late to affect .my-element

Example 2: Overriding Library Defaults

// ---- library-defaults.less ----
@button-bg: #007bff; // Library's default button background
@button-padding: 0.5em 1em;

// ---- my-theme.less ----
@button-bg: #5cb85c; // My theme overrides the button background

// ---- main.less ----
@import "library-defaults.less"; // Defines initial defaults
@import "my-theme.less";       // Overrides @button-bg

.button {
  background-color: @button-bg;     // Uses #5cb85c (from my-theme.less)
  padding: @button-padding;         // Uses 0.5em 1em (from library-defaults.less)
}

In this scenario, @button-bg from my-theme.less is the last definition before .button uses it, so it takes precedence. This allows you to define default variables in a library and easily override them in your project-specific files by importing your overrides after the library defaults but before the rules that use those variables are fully processed.

Operations with Variables

Variables in LESS can store various data types, including numbers (with or without units), strings, colors, and lists. You can perform operations on them:

• Arithmetic: @base-width: 100px; @sidebar-width: @base-width / 3;
• Color Functions: @alert-color: #ff0000; @darker-alert: darken(@alert-color, 20%);
• String Concatenation: (Usually handled via interpolation)

Practical Scenarios

• Theming: Define a set of variables for colors, fonts, spacing, etc., to easily switch themes or maintain brand consistency.
• Grid Systems: Use variables for column counts, gutter widths, and container sizes.
• Responsive Breakpoints: Store media query breakpoints in variables for consistent use: @screen-md: 768px;.
• Avoiding Magic Numbers/Strings: Replace hardcoded values with named variables for better readability and easier updates.

Variables are fundamental to writing DRY (Don’t Repeat Yourself), maintainable, and flexible LESS code. For further details, explore the official LESS documentation on Variables.