Why Combining & with pseudo-classes in SASS? - Purpose & Use Cases

The Big Idea

Discover how a tiny symbol can save you from repeating yourself and make your styles shine!

The Scenario

Imagine you want to style a button differently when someone hovers over it or when it is active. You write separate CSS rules for each state, repeating the button's class name every time.

The Problem

This means lots of repeated code and if you change the button's class name, you must update it everywhere. It's easy to make mistakes and hard to keep styles consistent.

The Solution

Using & with pseudo-classes in Sass lets you write styles relative to the current selector. You combine the parent selector with pseudo-classes like :hover without repeating the full selector.

Before vs After

✗ Before

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

✓ After

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

What It Enables

This makes your code cleaner, easier to read, and faster to update while keeping styles tightly connected to their elements.

Real Life Example

Think of a website with many buttons that change color on hover and click. Using & with pseudo-classes keeps all button styles organized in one place, making design updates simple.

Key Takeaways

Writing styles with & avoids repeating selectors.

Pseudo-classes like :hover can be combined neatly inside a block.

Code becomes easier to maintain and less error-prone.