Entrar Ainda não tem acesso?
1
resposta

Faça como eu fiz: agrupando códigos repetitivos com @extend

Referente ao curso SASS com Vite: otimizando e modularizando seu CSS, no capítulo Utilizando @extend no Sass e atividade Faça como eu fiz: agrupando códigos repetitivos com @extend

por Estanislau Antonio da Silva Junior
| 63.3k xp | 224 posts

Criando %placeholders no Sass

%base-h2 {
    color: variables.$heading-color;
    font-weight: 400;
    margin: 2rem,0;
    %base-p {
    margin-boton: variables.$margin-bottom-regular;
    line-height: 1.6;
}

Aplicando %placeholders com @extend

h2 {
    @extend %base-h2;
    text-align: left;
}

p {
    font-size: 1.25rem;
    text-align: left;
    @extend %base-p;
}
h2 {
    @extend %base-h2;
    text-algin: center;
    font-size: 4rem;
}

p {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    @extend %base-p
}
 h2 {
        @extend %base-h2;
        text-align: left;
        font-size: 5.75rem;
        line-height: 5.84rem;
p {
        font-size: 1.25rem;
        text-align: left;
        @extend %base-p;
    }
}
1 resposta
por Daniel Nogueira
| 473.7k xp | 907 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Estanislau! Como vai?

Muito bem! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Observei que você explorou o uso de placeholders no Sass para reaproveitar estilos, utilizou muito bem o @extend para reduzir repetição de código e ainda compreendeu a importância do design consistente para a organização dos estilos.

Permaneça postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

Alguns materiais estão em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

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