Less - Nested Rules

LESS - Nested Rules

Description

Nesting is one of the most powerful features of LESS. It allows you to write CSS selectors in a hierarchical structure that mirrors your HTML structure. This makes your LESS code more organized, readable, and easier to maintain by reducing repetition and clearly defining scope.

Instead of writing long, repetitive selectors, you can nest child selectors inside their parent selectors. LESS will then process these nested rules and generate the corresponding standard CSS.

The Parent Selector: &

LESS includes a special selector, &, known as the parent selector. It’s primarily used when you want to apply a pseudo-class, an attribute selector, or a modifier class to the parent selector of the current nesting level without repeating its name. It can also be used to create more complex selector combinations.

• Pseudo-classes: a { &:hover { ... } } compiles to a:hover { ... }.
• Modifier classes on the parent: .button { &.large { ... } } compiles to .button.large { ... }.
• Prepending selectors: body.theme-dark & { ... } inside a nested rule for .element would compile to body.theme-dark .element { ... }.

Example

The following example demonstrates nested rules, including the use of the parent selector &.

HTML File (nested_rules_example.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LESS Nested Rules Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header class="main-header">
        <h1>Site Title</h1>
        <nav>
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <p>This is some primary content.</p>
        <div class="sidebar">
             <p>This is a sidebar section.</p>
        </div>
    </div>
</body>
</html>

LESS File (style.less):

.main-header {
  background-color: #f0f0f0;
  padding: 20px;

  h1 {
    margin: 0 0 15px 0;
    color: #333;
  }

  nav {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        display: inline-block;
        margin-right: 10px;

        a {
          text-decoration: none;
          color: #007bff;

          &:hover {
            text-decoration: underline;
          }

          &.active {
            font-weight: bold;
            color: #0056b3;
          }
        }
      }
    }
  }
}

.content {
    padding: 15px;
    p {
        font-size: 16px;
        line-height: 1.6;
    }
    // Nesting a child selector
    .sidebar {
        background-color: #e9ecef;
        padding: 10px;
        margin-top: 15px;
        p {
            font-size: 14px;
            color: #555;
        }
    }
}

Compile style.less to style.css:

lessc style.less style.css

Compiled CSS File (style.css):

.main-header {
  background-color: #f0f0f0;
  padding: 20px;
}
.main-header h1 {
  margin: 0 0 15px 0;
  color: #333;
}
.main-header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-header nav ul li {
  display: inline-block;
  margin-right: 10px;
}
.main-header nav ul li a {
  text-decoration: none;
  color: #007bff;
}
.main-header nav ul li a:hover {
  text-decoration: underline;
}
.main-header nav ul li a.active {
  font-weight: bold;
  color: #0056b3;
}
.content {
  padding: 15px;
}
.content p {
  font-size: 16px;
  line-height: 1.6;
}
.content .sidebar {
  background-color: #e9ecef;
  padding: 10px;
  margin-top: 15px;
}
.content .sidebar p {
  font-size: 14px;
  color: #555;
}

Output

To observe the effect:

• Save the HTML code as nested_rules_example.html.
• Save the LESS code as style.less.
• Compile it to style.css.
• Open nested_rules_example.html in a browser. The styles defined through nesting will be applied.

Nested rules significantly improve the organization of complex stylesheets. However, it’s good practice to avoid excessive nesting (more than 3-4 levels deep) as it can lead to overly specific CSS selectors that are hard to override and can impact performance. (For more on nesting strategies, see the official Less documentation: lesscss.org/features/#features-overview-feature-nested-rules)