How to apply a style to both parent and child in SCSS

Question

I have this situation:

<div class="parent">
     <a class="child"></a>
</div>

and I wanto to give width: 100% rule to both. Is there a better way in SCSS rather than writing:

.parent{
    width: 100%;
    .child{
        width: 100%;
    }
 }

I am rather new to SCSS syntax, and so maybe it is a very simple question, but nowhere I can find a simple answer.

Answer 1

You target the current selector with &, so you could write:

.parent {
  &, .child {
    width: 100%;
  }
}

As a bonus, you also use & as follows:

.parent {
  &.mother {
    // target elements classed `parent` AND `mother`

    .grandparent & {
      // target elements classed `parent` AND `mother` with a 
      // `grandparent` ancestor.
    }
  }
}