Why Parent selector with & in SASS? - Purpose & Use Cases

The Big Idea

Discover how a single symbol can save you from endless copying and pasting in your styles!

The Scenario

Imagine you want to style a button and its hover state. You write separate CSS rules for .button and .button:hover manually.

The Problem

Writing separate selectors means repeating the parent class name each time. If you rename the parent class, you must update every related selector manually, which is slow and error-prone.

The Solution

The parent selector & in Sass lets you nest styles and refer to the parent selector automatically. This keeps your code DRY and easier to maintain.

Before vs After

✗ Before

.button { color: blue; }
.button:hover { color: red; }

✓ After

.button {
  color: blue;
  &:hover {
    color: red;
  }
}

What It Enables

You can write cleaner, nested styles that automatically link to the parent selector, making your CSS easier to read and update.

Real Life Example

When styling a navigation menu, you can nest hover and active states inside the main menu item style using &, so all related styles stay grouped and consistent.

Key Takeaways

Manually repeating selectors is tedious and error-prone.

The & parent selector lets you nest and reuse the parent selector easily.

This leads to cleaner, maintainable, and DRY CSS code.