Less Nested Rules Explained

Nesting in Less

Nesting lets you write selectors inside others, mirroring your HTML structure and reducing repetition.

Basic Nesting

.card {
  padding: 20px;
  .title { font-size: 24px; }
  .body  { color: #666; }
}

/* Compiles to: */
.card { padding: 20px; }
.card .title { font-size: 24px; }
.card .body { color: #666; }

The & Parent Reference

.btn {
  color: blue;
  &:hover { color: darkblue; }
  &.active { font-weight: bold; }
  &--large { padding: 16px; }
}

Nesting Media Queries

.sidebar {
  width: 100%;
  @media (min-width: 768px) {
    width: 250px;
  }
}

Avoid Deep Nesting

Keep nesting under 3 levels — deep nesting creates overly specific, hard-to-override CSS.

FAQs

What does & mean?

It refers to the parent selector — essential for states and modifiers. More in our Less guides.

Is nesting the same in SCSS?

Yes — nearly identical syntax.