Nested selectors make writing descendant and complex selectors fast and simple.

.card {
  display: flex;
  h1 {
    color: $color-primary;
  }
} 

Overcomplicating Nesting

Be careful! Too much nesting could make your code difficult to read and create loads of unnecessary output. Create no more than 2-level deep nesting.

 .main-nav {
  margin-top: 1em;
  li {
    display: inline-block;
    margin: 0 0.65em;
  }
  a {
    color: $white;
    font-size: 0.85em;
    text-decoration: none;
    text-transform: uupercase;
  }
} 

We could have nested the a inside the li, but it’s not really dependent on it like the li is dependent on main-nav. Don’t overcomplicate nesting.

Direct Child Combinator

.card {
  display: flex;
  > h1 {
    color: $color-primary;
  }
} 

Grouping Selectors

.card {
  display: flex;
  h1, h2, h3  {
    color: $color-primary;
  }
} 

Namespaces

Sass also provides a shorthand for writing properties with CSS namespaces, using the : sign

.button {
  text: {
    align: center;
    decoration: none;
    transform: uppercase;
  }
}

Compiles to:

.button {
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}