Buscar
Cerrar este cuadro de búsqueda.

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!

Si te gustó, compártelo con alguien más

Artículos relacionados

Pablo (OtakuPahp)

Pablo (OtakuPahp)

Soy desarrollador fullstack experto en WordPress y me encanta aprender constantemente. Padre novato, programador apasionado, consultor tecnológico entre otras cosas más. Siempre me he considerado como alguien creativo con un gran deseo por aprender.