@Extend e herança em SASS | Explicado

Escrever um código CSS limpo e legível que não repita valores redundantes é absolutamente possível usando uma folha de estilos sintaticamente impressionante (SASS). Enquanto estilizam elementos em uma página da web, frequentemente encontramos uma situação em que os elementos são estilizados de maneira semelhante, apenas diferentes em pequenos detalhes. Escrever uma folha de estilo para esses elementos pode ser muito agitado porque a quantidade de valores redundantes seria enorme. Para evitar tais situações, o SASS fornece a regra @Extend. Este post discute esta regra em detalhes.

Regra e herança @Extend Sass @Extend

Quando seus elementos são estilizados de maneira semelhante apenas diferentes em detalhes menores, você gostaria de herdar propriedades semelhantes de um elemento para outro. Isso é possível usando a regra @extend que permite herdar propriedades usadas para um seletor para outro.

Vamos tentar entender essa regra e como ela ajuda a herdar propriedades CSS semelhantes com a ajuda de um exemplo.

Exemplo

No exemplo abaixo, estamos assumindo que existem várias mensagens que aparecem em nosso site, como mensagem de erro, mensagem de aviso, mensagem de sucesso, etc. Com o objetivo de modelar esses elementos, estamos primeiro definindo uma classe .padrão de mensagem que contém todas as propriedades que são redundantes para todos os tipos de mensagens que aparecem em nosso site.

Sass

.padrão de mensagem
preenchimento: 5px;
borda: 2px cinza sólido;
Alinhamento de texto: centro;
cor branca;

Agora este é o estilo básico que todas as mensagens terão, independentemente de seu tipo. Agora, quando se trata de estilizar essas mensagens separadamente, você pode herdar essas propriedades do .classe padrão de mensagem, além de escrever outras propriedades de estilo para cada tipo de mensagem.

Sass

.erro de mensagem
@ampliar .padrão de mensagem;
Background-Color: Blue;

.Derunda de mensagens
@ampliar .padrão de mensagem;
cor de fundo: vermelho;

.Mensagem-sucesso
@ampliar .padrão de mensagem;
Background-Color: verde;

Agora você pode notar que, no trecho de código acima, usamos a regra @Extend para herdar as propriedades do .classe padrão de mensagem para estilizar cada tipo de mensagem enquanto isso, dando a cada um deles uma cor diferente de fundo. Isso pode economizar muito tempo e energia e o número de linhas de código reduz.

O arquivo de saída CSS resultante ficará assim.

.padrão de mensagem, .erro de mensagem, .envergonhar de mensagens, .Mensagem-sucesso
preenchimento: 5px;
borda: 2px cinza sólido;
Alinhamento de texto: centro;
cor branca;

.erro de mensagem
Background-Color: Blue;

.Derunda de mensagens
cor de fundo: vermelho;

.Mensagem-sucesso
Background-Color: verde;

Ao se referir a essas classes em seu código HTML, não há necessidade de se referir a várias classes, basta usar as classes atribuídas a cada uma das mensagens. Por exemplo, não use isso

, Simplesmente use isso

.

Conclusão

A regra @extend em SASS permite herdar propriedades semelhantes quando seus elementos são estilizados de maneira semelhante, apenas diferentes em pequenos detalhes. Você pode definir o estilo básico de tais elementos em uma classe e depois herdar essa classe usando a regra @extend em outras classes, juntamente com um estilo adicional para esse elemento específico. Usar esta regra pode economizar muito tempo e reduzir as linhas de código, tornando seu código limpo.