LESS Cheat Sheet

How to Use This Cheat Sheet

Each table below groups related LESS syntax together, variables and imports, mixins and guards, functions, and selectors, so you can quickly jump to the category you need without re-reading full lessons.

@primary: #2563eb;
@import (reference) "mixins";

.card {
  .box-shadow(0, 2px, 8px, fade(black, 15%));
  &:hover { background: darken(@primary, 5%); }
}

A realistic line of LESS touches several categories at once: variables, imports, mixins, color functions, and the parent selector.

Core Syntax at a Glance

@variable: value;
.selector { &:hover { ... } }
@import "file";
.mixin(@param: default) { ... }
.mixin(@a) when (condition) { ... }

• Variables (@name), nesting with &, and @import form the foundation of everyday LESS.
• Mixins accept parameters with defaults; guards use when for conditional logic.
• There is no @if/@else; guarded mixin definitions replace conditional statements entirely.
• Refer back to the individual lessons in the sidebar for deeper explanations of any row below.

Variables, Imports, and Nesting

Core syntax for declaring values and loading files.

Mixins and Guards

Reference for defining, calling, and conditionally branching mixins.

Functions and Operations

Reference for math, color, string, and list functions.

Selectors and Interpolation

Reference for BEM patterns, interpolation, and extend.

Common Mistakes

• Trying to memorize this entire cheat sheet instead of using it as a fast lookup while actively building.
• Copying a syntax pattern without adjusting variable and mixin names to match your actual project.
• Forgetting that this condensed view omits edge cases covered in the full individual lessons.
• Not bookmarking the official LESS documentation alongside this page for anything not covered here.

Key Takeaways

• This cheat sheet condenses variables, imports, nesting, mixins, guards, and functions into one reference.
• Use it as a fast lookup while building, not a replacement for understanding the underlying concepts.
• Revisit the full lesson for any row when you need deeper context or edge-case handling.
• The official LESS documentation remains the definitive source for anything not covered here.

Color Functions Reference

The most commonly used LESS color functions in one table.

Architecture and Responsive Reference

Common patterns for breakpoints, tokens, and folder structure.