Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não entedi

Não entendi o motivo de podermos utilizar &__ com o restante do nome, nem como fazê-lo posteriormente.

1 resposta
solução!

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.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓