Concatenación de clases anidadas mediante SASS

Estoy intentando utilizar la función de anidamiento de SASS para concatenar dos clases, pero no puedo encontrar la manera de hacerlo.

Este es el HTML:

some date

Aquí está mi SASS actual:

 .a .c display: inline-block .date width: 50px 

Crea el siguiente CSS:

 .a .c { display: inline-block; } .a .c .date { width: 50px; } 

Pero esto no funciona. El navegador espera que la “fecha” y “cadena larga” se aniden en la clase “c” en lugar de que ambos existan en la misma etiqueta HTML.

Lo que necesito es esto ( no hay espacio entre .c y .date => .c.date ):

 .a .c { display: inline-block; } .a .c.date { width: 50px; } 

¿Cómo puedo hacer esto?

&

Puede lograr esto con el operador de ampersand . Tratar:

 .a .c display: inline-block &.date width: 50px 

El ampersand es un marcador de posición para los selectores principales. Y si no coloca un espacio después de él en un selector nested, obtendrá un selector concatenado (justo lo que desea).

MANIFESTACIÓN


Nota: en selectores & stands nesteds más profundos para toda la ruta de selectores nesteds, no solo para el padre inmediato.