What does "&" do in LESS CSS?

Understanding the '&' Selector in LESS CSS

Explore the powerful parent selector '&' in LESS CSS, its various applications, and how it simplifies your stylesheets for cleaner, more maintainable code.

LESS CSS, a popular CSS preprocessor, introduces several features that enhance the development experience and improve stylesheet organization. One of its most powerful and frequently used features is the parent selector, denoted by the ampersand symbol (&). This special selector allows you to reference the parent selector within a nested rule, leading to more concise, readable, and maintainable CSS.

Basic Usage: Referencing the Parent Selector

The most fundamental use of & is to refer to the parent selector. This is incredibly useful for creating pseudo-classes, pseudo-elements, and modifying the parent's state without repeating the parent selector's name. It keeps your CSS DRY (Don't Repeat Yourself) and makes it easier to understand the relationship between nested rules.

.button {
  background-color: blue;
  color: white;

  &:hover {
    background-color: darkblue;
  }

  &::before {
    content: '▶';
    margin-right: 5px;
  }
}

Basic usage of & for pseudo-classes and pseudo-elements.

In the example above, &:hover compiles to .button:hover and &::before compiles to .button::before. This nesting clearly shows that the hover effect and the ::before pseudo-element are directly related to the .button class.

Concatenating with the Parent Selector

Beyond simple referencing, the & selector can be concatenated with other strings to form new selectors. This is particularly useful for creating BEM-like (Block-Element-Modifier) naming conventions or for generating related class names. When & is placed before a string, it acts as a prefix; when placed after, it acts as a suffix.

.card {
  border: 1px solid #ccc;
  padding: 15px;

  &--primary {
    background-color: lightblue;
  }

  &__title {
    font-size: 1.5em;
  }

  .is-active& {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
}

Using & for BEM-style naming and state classes.

This LESS code compiles to:

.card {
  border: 1px solid #ccc;
  padding: 15px;
}
.card--primary {
  background-color: lightblue;
}
.card__title {
  font-size: 1.5em;
}
.is-active.card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Notice how &--primary becomes .card--primary, &__title becomes .card__title, and is-active& becomes .is-active.card. The last example is crucial for creating combined selectors where the parent selector is not the first part.

flowchart TD
    A["LESS Input: .parent { &child { ... } }"] --> B{"&"}
    B --> C["Replaced by parent selector"]
    C --> D["Concatenated/Used as reference"]
    D --> E["Compiled CSS Output"]
    subgraph Examples
        F[".button { &:hover { ... } }"] --> G[".button:hover"]
        H[".card { &--modifier { ... } }"] --> I[".card--modifier"]
        J[".card { .is-active& { ... } }"] --> K[".is-active.card"]
    end
    A --> F
    A --> H
    A --> J

How the & selector is processed in LESS.

Referencing Multiple Parent Selectors

When nesting deeply, & always refers to the immediate parent selector. However, you can use && to refer to the parent selector twice, or & multiple times to represent the full path of parent selectors. This is less common but can be powerful for very specific use cases, especially when dealing with complex component structures or theme variations.

.block {
  color: black;

  .element {
    font-weight: bold;

    &.is-active {
      background-color: yellow;
    }

    .sub-element {
      font-size: 0.9em;

      &&--highlight {
        border: 2px solid red;
      }
    }
  }
}

Using && to reference the parent selector twice.

In this example, &&--highlight inside .sub-element refers to .block .element .sub-element twice, resulting in .block .element .sub-element.block .element .sub-element--highlight. This is a very specific use case and often indicates a need to rethink the nesting structure for simplicity, but it demonstrates the flexibility of &.

When to Use &

The & selector is best utilized in scenarios where you want to:

• Apply pseudo-classes or pseudo-elements: &:hover, &:focus, &::before, &::after.
• Create combined selectors: .parent.is-active, .parent[attribute].
• Generate BEM-like modifiers or elements: &--modifier, &__element.
• Target specific states or contexts: .theme-dark & (when the parent is within a dark theme).
• Simplify media queries: Nesting media queries inside a selector allows the & to represent the current selector within that media query.

.container {
  width: 100%;

  @media (min-width: 768px) {
    & {
      width: 75%;
    }
  }
}

Using & within media queries.

This compiles to:

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

This keeps the media query contextually relevant to the .container selector.