Não entendi o motivo de podermos utilizar &__ com o restante do nome, nem como fazê-lo posteriormente.
Não entendi o motivo de podermos utilizar &__ com o restante do nome, nem como fazê-lo posteriormente.
Opa Pedro, tudo ok?
Vamos com calma, vou tentar explicar para você de uma forma diferente:
O uso de &
em combinação com __
(ou qualquer outra classe, elemento ou seletor) em código Sass é uma técnica chamada de "Parent Selector" ou "Seletor Pai". O &
representa o seletor pai, ou seja, a classe ou elemento que está envolvendo o seletor atual. Isso é especialmente útil quando você deseja aninhar estilos de forma mais eficiente e manter seu código organizado.
No código Scss da aula, temos a classe .component
e está usando &__logo
e &__txt
como seletores filhos dessa classe. Aqui está como isso funciona:
.component {
width: 100%;
padding: 20px 0;
&__logo {
max-width: 100px;
}
&__txt {
margin: auto;
font-size: 14px;
font-family: Arial;
text-align: center;
}
}
.component
é a classe pai.&__logo
é um seletor que se refere a .component__logo
.&__txt
é um seletor que se refere a .component__txt
.A principal vantagem disso é que você pode economizar tempo e tornar seu código mais legível, especialmente quando deseja estilizar elementos que são claramente relacionados a uma classe pai. Isso evita que você tenha que repetir a classe pai em cada seletor filho. Além disso, quando você precisa atualizar o seletor pai (por exemplo, se .component
for renomeada para .box
), você não precisa atualizar manualmente todos os seletores filhos, pois o Sass fará isso automaticamente.
Essa técnica é comumente usada em Sass e em outros pré-processadores CSS, como o SCSS, para criar estilos mais organizados e menos propensos a erros.
Espero que essa explicação tenha sido útil. Se você tiver alguma pergunta adicional ou precisar de ajuda específica, por favor, me informe!
Abraços e bons estudos.