SASS: elemento padre (&) con diferentes selectores

Es muy probable que tengamos en SASS unos estilos para una determinada clase (por ejemplo: .test), pero esta a la vez se utilice en diferentes tipos de selector (p, a, div…) y queremos darle estilos diferentes a cada uno de estos.

Ejemplo de html:

<p class="test">Soy un parrafo</p>
<div class="test">Soy un div</div>
<a href="#" class="test">Soy un enlace</a>

Vamos a poner a los 3 elementos en negrita para la clase «.test», pero a cada uno de ellos un color diferente en función del tipo selector que sean.

En Sass podemos intentar esto pero NO FUNCIONARÁ:

.test {
  font-weight: bold;
  p& {
    color: blue;
  }
  div& {
    color: green;
  }
  a& {
    color: red;
  }
}

Para poder resolver el problema podemos combinar la directiva @at-root junto con la interpolación #{}. Ejemplo:

.test {
  font-weight: bold;
  @at-root {
    p#{&} {
      color: blue;
    }
    div#{&} {
      color: green;
    }
    a#{&} {
      color: red;
    }
  }
}

Y AHORA SÍ, el resultado CSS ya sería:

.test {
  font-weight: bold;
}
p.test{
  color: blue;
}
div.test{
  color: green;
}
a.test{
  color: red;
}