1
resposta

Minhas soluções dos desafios

a {
                text-decoration: none;
                @include mixins.ff-fs-cl(variaveis.$fonte-textos, 1.5rem, variaveis.$cor-primaria );
                font-weight: 500;

                &:hover {
                    font-weight: 600;
                }
            }
.btn-main {
                width: 60%;
                padding: 1rem;
                border-radius: 100px;
                border: none;
                background-color: variaveis.$cor-default;
                color: white;
                font-family: variaveis.$fonte-textos;
                font-size: 1.375rem;
                line-height: 1.125rem;
                font-weight: 600;

                &:hover {
                    background-color: variaveis.$cor-secundaria;
                }
            }
1 resposta

Oi, Raynara! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu uso de @include e &:hover mostra que você está dominando bem os recursos do SASS para reaproveitamento de código e interatividade. A estrutura das classes também está bem organizada!

Uma dica interessante para o futuro é explorar o uso do @extend para evitar duplicações em botões parecidos. Veja este exemplo:


%btn-base {
  padding: 1rem;
  border-radius: 100px;
  border: none;
  font-family: variaveis.$fonte-textos;
  font-size: 1.375rem;
  line-height: 1.125rem;
}

.btn-main {
  @extend %btn-base;
  background-color: variaveis.$cor-default;
  color: white;
  font-weight: 600;

  &:hover {
    background-color: variaveis.$cor-secundaria;
  }
}

Esse código cria uma base reutilizável para diferentes estilos de botões. O @extend ajuda a manter o código limpo e mais fácil de manter.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!