Agregar una clase antes del selector en SASS

Hoy necesitaba hacer un SASS loco que me dejase agregar una clase al inicio de todo. Mi SASS era así:

.archive.tax-product_cat,
.archive.tax-product_tag {
  main {
    & section {
      width: 100%;
    }
  }
}

Lo que daba como resultado:

.archive.tax-product_cat main section,
.archive.tax-product_tag main section {
  width: 100%;
}

Las clases superiores .archive, .tax-product_cat y .tax-product_tag son clases de body, por lo que son lo más alto que se puede llegar

PERO necesitaba que el ancho de la sección sea de 80% si body contenía la clase .term-gift, por lo que pensé que la solución sería:

.archive.tax-product_cat,
.archive.tax-product_tag {
  main {
    & section {
      width: 100%;
      .term-gift& {
        width: 80%;
      }
    }
  }
}

Eso no funcionó, me dio error… así que después de investigar un poco aprendí sobre la interpolación en SASS y mi código se convirtió en esto:

.archive.tax-product_cat,
.archive.tax-product_tag {
  main {
    & section {
      width: 100%;
      .term-gift#{&} {
        width: 80%;
      }
    }
  }
}

Pero el resultado tampoco fue el esperado.

Quería esto:

.term-gift.archive.tax-product_cat main section,
.term-gift.archive.tax-product_tag main section {
  width: 80%;
}

Y resultó esto:

.archive.tax-product_cat main section.term-gift,
.archive.tax-product_tag main section.term-gift {
  width: 80%;
}

Así que la interpolación no fue suficiente, por lo que tuve que indagar un poco más y encontré la regla at-root. Que forma parte de las «At-Rules» de SASS.

Esta regla me permite básicamente agregar mi selector al inicio de todo, sin importar cuando aninado se encuentre. Eso y la ayuda de la interpolación me ayudó a resolver mi problema y esto:

.archive.tax-product_cat,
.archive.tax-product_tag {
  main {
    & section {
      width: 100%;
      @at-root .term-gift#{&} {
        width: 80%;
      }
    }
  }
}

Se convirtió en esto:

.term-gift.archive.tax-product_cat main section,
.term-gift.archive.tax-product_tag main section {
  width: 80%;
}

¡Tal como quería!