@mixin

Oi Allison, tudo bem?

Quando você utiliza o @mixin para criar uma função, você pode passar parâmetros para essa função. No caso do mixin "cor-e-texto", você está passando duas variáveis como parâmetros: $cor-de-fundo e $cor-do-texto. Essas variáveis são definidas quando você chama o mixin, como por exemplo:

.esquerdo {
    @include cor-e-texto($cor-principal, $cor-secundaria);
}

.direito {
    @include cor-e-texto($cor-secundaria, $cor-principal);
}

Dessa forma, quando você chama o mixin e passa os valores das variáveis $cor-principal e $cor-secundaria, esses valores são atribuídos às variáveis $cor-de-fundo e $cor-do-texto dentro do mixin. Assim, o mixin utiliza essas cores para aplicar os estilos definidos, como o background-color e a cor do texto.

É importante ressaltar que as variáveis $cor-principal e $cor-secundaria devem ser declaradas antes de você chamar o mixin, como você fez no seu código:

$cor-principal: #18122B;
$cor-secundaria: #635985;

Dessa forma, quando você chama o mixin e passa essas variáveis como parâmetros, o mixin utiliza os valores definidos nelas.

Espero ter esclarecido a sua dúvida

Um abraço e bons estudos.