.pirate {
.&-monkey-d-luffy {
color: red;
}
}
essa é a resposta do segundo exercício da aula 3. Está correto?
Devo por o & depois do ponto e ainda adcionar um hífen ao lado? Não deveria ser ao menos &.monkey-d-luffy ou &:.monkey-d-luffy ?
Ps: Obrigada escritor do exercício por ter bom gosto para animes :)
Olá, Helena!
Realmente é um bom gosto rs!
A resposta para o exercício está correta. No SASS, o & é usado para se referir ao seletor pai, que no caso é .pirate. Quando você escreve .&-monkey-d-luffy, você está concatenando o seletor pai (.pirate) com -monkey-d-luffy, resultando em .pirate-monkey-d-luffy.
O hífen após o & é necessário porque você quer que o nome da classe seja .pirate-monkey-d-luffy, e não .piratemonkey-d-luffy. Se você remover o hífen, a classe resultante será .piratemonkey-d-luffy, que é diferente.
As opções &.monkey-d-luffy e &:.monkey-d-luffy que você mencionou não são corretas neste caso. A primeira opção (&.monkey-d-luffy) resultaria em .pirate.monkey-d-luffy, o que significa que você está procurando um elemento que tenha ambas as classes .pirate e .monkey-d-luffy ao mesmo tempo. A segunda opção (&:.monkey-d-luffy) não é uma sintaxe válida em SASS.
Portanto, o código que você postou é a maneira correta de aplicar o seletor de parentesco para a classe .monkey-d-luffy que herda da classe .pirate em SASS.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!