Você certamente sabe que é impossível “subir” a árvore DOM com um seletor CSS. Deve ser uma abordagem descendente, de um elemento pai para seus filhos. Nada de novo aqui. Mas adivinhe, você pode conseguir o oposto com Sass ou menos!
Vejamos uma situação concreta, você tem um elemento que pode receber várias classes, cada uma delas trata de partes específicas do estilo.
.elem {
/* classes to be placed on .elem */
&.class1 { }
&.class2 { }
/* styles for some children */
p { }
.etc { }
/* apply styles if elem has .elem-wraper as parent */
.elem-wraper & { }
}Aqui você pode ver 3 tipos de seletores.
As duas primeiras linhas com o & imediatamente seguidas por algo serão compiladas exatamente assim: .elem.class1 { }
O segundo bloco de seletores destina-se a descendentes .elem. Portanto, op será compilado assim:.elem p { )
E, finalmente, você pode fazer referência ao pai de .elem colocando o & no final do seu seletor, e ele irá compilar assim: .elem-wraper .elem { }
Como @wjonthomas mencionado nos comentários, esteja ciente de que essa técnica não permite que você altere os estilos dos pais, mas fornece um novo contexto para .elem, para que você possa aplicar novos estilos a .elem se ele tiver .elem-wraper como pai .
Isso é simplesmente mágico: P