gistfile1.txt

Para los nombres de la clases uso un estilo similar a BEM, el cual consiste basicamente en:

* Separar objeto hijo de padre con __ (.product__name)
* Separar un tipo distinto del objeto base con -- (.product--offer)


Este estilo me sirve muchisimo para controlar la especificidad y entender leyendo directamente el html que es cada cosa, pero a veces se vuelve tedioso escribir el scss, porque repetis un monton, por ejemplo, para un objecto .product, una parte podria ser:

.product__name{}
.product__description{}
.product__action{}
.product__brand{}
...

Entonces esta feature nueva de Sass me ayuda a escribir menos codigo, convirtiendose el ejemplo anterior en:

.product{
  @at-root {
    #{&}__name{}
    #{&}__description{}
    #{&}__action{}
    #{&}__brand{}
  }
}

Este es un caso muy basico y corto, pero se vuelve mas util y logico cuando .product tiene muchos elementos hijos, que a su vez pueden tener sus propios hijos. Ademas, supongamos que el dia de mañana quiero cambiar .product por .item. En mi version original, tendria que hacer un search & replace de todas las apariciones de .product__. Ya se, no es complicado, pero en esta nueva version se vuelve todo mas coherente y cohesivo, cambiando solamente la declaracion original de la clase.