Seletores de extensão e marcadores de posição

@extend permite que um seletor herde todos os estilos de outro. Em vez de duplicar código, a extensão cria um conjunto de regras compartilhado no CSS compilado.

Um seletor de espaço reservado (prefixado com %) define um bloco de estilos que nunca é compilado sozinho — somente quando é estendido. Ele não gera CSS, a menos que algo o estenda.

Estender uma classe real adiciona todo o contexto do seletor dessa classe à saída compilada. Os espaços reservados são mais limpos — geram seletores agrupados somente para os seletores que os estendem.

Quando vários seletores estendem o mesmo espaço reservado, o Sass os agrupa em uma regra separada por vírgulas:

@extend tem limitações importantes:

• Não pode ser usado dentro de consultas de mídia
• Pode produzir seletores agrupados grandes e inesperados quando há cadeias de extensões
• Torna mais difícil rastrear o CSS compilado até os arquivos de origem

Comparação:

• @extend: CSS menor (regras compartilhadas), mas com cadeias complexas de seletores e limitações em consultas de mídia
• @mixin: duplica declarações, mas é mais previsível e pode ser usado dentro de consultas de mídia

Na prática moderna do Sass, as misturas geralmente são preferidas a @extend. HTTP/2 e a compressão gzip tornam a duplicação de declarações menos importante, enquanto a facilidade de depuração das misturas compensa a diferença mínima no tamanho do CSS.

@extend (com espaços reservados) é apropriado quando:

• Vários seletores realmente compartilham o mesmo estado semântico (por exemplo, estados de erro)
• Você não está dentro de uma consulta de mídia
• Os estilos básicos são estáveis e bem definidos

Os espaços reservados funcionam bem para conjuntos de utilitários semelhantes a redefinições que vários componentes herdam:

Alguns guias de estilo e equipes proíbem @extend completamente devido à sua complexidade e ao excesso de seletores que ele pode causar. Conheça os compromissos e siga as convenções da sua equipe.

Qual é a diferença entre estender uma classe comum e estender um seletor de espaço reservado (%)?

@extend permite que um seletor herde os estilos de outro, agrupando seletores no CSS compilado. Os espaços reservados (%name) não geram nada até serem estendidos — são mais limpos do que estender classes reais. Evite @extend dentro de consultas de mídia. No Sass moderno, as misturas geralmente são preferidas a @extend por sua previsibilidade e facilidade de depuração.