Não tinha entendido muito bem e resolvi dar uma olhada no css gerado.
scss
.pirate{
background-color: white;
&-monkey-d-luffy {
color: red;
&:hover{
opacity: 50;
}
}
}
** css gerado**
.pirate {
background-color: white;
}
.pirate-monkey-d-luffy {
color: red;
}
.pirate-monkey-d-luffy:hover {
opacity: 50;
}/*# sourceMappingURL=styles.css.map */
Olá, Diego, como vai?
A questão que você trouxe tem a ver com o uso do & no SCSS. No exemplo que você mostrou, o & serve como um "referenciador" do seletor pai, ou seja, ele traz o nome da classe .pirate para o contexto dos elementos filhos.
No caso do &-monkey-d-luffy, o & é substituído por .pirate, gerando o seletor .pirate-monkey-d-luffy. Isso permite criar um nome de classe composto com a base .pirate e o sufixo -monkey-d-luffy, como você viu no CSS gerado. O & serve para manter a estrutura de herança de seletores, tornando seu código mais modular e fácil de ler.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)