Concatenando classs aninhadas usando SASS

Eu estou tentando usar o recurso de aninhamento do SASS para concatenar duas classs, mas não consigo descobrir como fazê-lo.

Este é o HTML:

  some date

Aqui está o meu atual SASS:

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

Cria o seguinte CSS:

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

Mas isso não funciona. O navegador espera que o “date” e o “string-long” sejam nesteds sob a class “c”, em vez de ambos existirem na mesma tag HTML.

O que eu preciso é isso ( sem espaço entre .c e .date => .dc ):

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

Como posso fazer isso?

E

Você pode conseguir isso com o operador de e comercial . Experimentar:

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

Oe comercial é um espaço reservado para seletores pai. E se você não colocar um espaço após ele em um seletor nested, ele emitirá um seletor concatenado (exatamente o que você deseja).

DEMO

^{Nota: em seletores nesteds mais profundos & significa todo o caminho de seletores nesteds não apenas para o pai imediato.}