SCSS Selector Cheatsheet

Overview

SCSS (Sassy CSS) extends CSS with more powerful selector features. You can nest selectors, use the parent selector &, and even interpolate variables to create dynamic selectors.

This page covers the most useful SCSS selector patterns with examples students can easily try in their projects. Each section has short, student-friendly explanations to help you truly understand when and why to use them.

Nesting Selectors

Nesting means writing one selector inside another, so your styles are grouped logically. This makes your SCSS shorter and more readable. For example, all styles for a .nav can live inside one block, instead of writing long repeated selectors like .nav ul or .nav li.

Think of it like folders on your computer — everything related stays together in one place. Beginners often find nesting helpful because it reduces duplication and makes the CSS feel like a hierarchy.

.nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
}

Parent Selector (&)

The & symbol represents the current parent selector. It’s often used for states (like hover or active) or when you want to create variations of the same class. Instead of writing .btn:hover separately, you can place it inside .btn using &.

Think of & as a placeholder that SCSS replaces with the outer selector. This makes it much easier to see all related states or modifiers in one block.

.btn {
  &:hover {
    background: blue;
  }
  &.active {
    background: green;
  }
}

Interpolation

Interpolation allows you to insert SCSS variables into selectors or property names. For example, you can store a size or theme name in a variable and build a class name dynamically. This is useful when you want to generate multiple styles without writing repetitive code.

Students can think of interpolation like filling in a blank in a sentence. Wherever you write #{}, SCSS replaces it with the variable’s value before compiling.

$size: large;
.button-#{$size} {
  font-size: 2rem;
}

Mixing with Regular CSS

SCSS fully supports all CSS selectors — classes, IDs, attributes, pseudo-classes, and more. What SCSS adds is the ability to organize them better with nesting, variables, and the parent selector. This means you can write cleaner code without giving up any CSS power.

A good way to think about SCSS is: “CSS plus superpowers.” You can write the same CSS you already know, but SCSS helps reduce repetition and makes your styles easier to manage in bigger projects.

.card {
  border: 1px solid #ccc;
  &:hover {
    border-color: blue;
  }
  a[href] {
    color: red;
  }
}

How to use this page

1. Start with the overview to understand SCSS selector features.
2. Learn nesting to organize your styles better.
3. Use the & parent selector for states and modifiers.
4. Try interpolation with variables for dynamic class names.
5. Remember: all CSS selectors are valid in SCSS, with extra powers on top!