Selettori extend e placeholder

@extend consente a un selettore di ereditare tutti gli stili di un altro selettore. Invece di duplicare il codice, l'estensione crea un insieme di regole condiviso nel CSS compilato.

Un selettore segnaposto, preceduto da %, definisce un blocco di stili che non viene mai compilato autonomamente, ma solo quando viene esteso. Non genera CSS a meno che qualcosa non lo estenda.

L'estensione di una classe reale aggiunge al risultato compilato l'intero contesto del selettore di quella classe. I segnaposto sono più puliti: producono selettori raggruppati solo per i selettori che li estendono.

Quando più selettori estendono lo stesso segnaposto, Sass li raggruppa in una regola separata da virgole:

@extend presenta diversi svantaggi importanti:

• Non può essere utilizzato all'interno delle media query
• Può produrre selettori raggruppati imprevisti e molto lunghi quando si verificano catene di estensioni
• Rende più difficile risalire dal CSS compilato ai file sorgente

Confronto:

• @extend: CSS più compatto, grazie alle regole condivise, ma catene di selettori complesse e limitazioni nelle media query
• @mixin: duplica le dichiarazioni, ma è più prevedibile e può essere utilizzato all'interno delle media query

Nella pratica moderna di Sass, in genere si preferiscono i mixin a @extend. HTTP/2 e la compressione gzip rendono meno importante la duplicazione delle dichiarazioni, mentre la facilità di debug dei mixin compensa ampiamente la minima differenza nelle dimensioni del CSS.

@extend, insieme ai segnaposto, è appropriato quando:

• Più selettori condividono realmente lo stesso stato semantico, ad esempio gli stati di errore
• Non ci si trova all'interno di una media query
• Gli stili di base sono stabili e ben definiti

I segnaposto sono adatti agli insiemi di utility simili a un reset, ereditati da più componenti:

Alcune guide di stile e alcuni team vietano completamente @extend a causa della sua complessità e dell'eccessivo numero di selettori che può generare. Valuti i compromessi e segua le convenzioni del team.

Qual è la differenza tra l'estensione di una classe normale e l'estensione di un selettore segnaposto, indicato con %?

@extend consente a un selettore di ereditare gli stili di un altro, raggruppando i selettori nel CSS compilato. I segnaposto, come %name, non generano codice compilato finché non vengono estesi e sono più puliti rispetto all'estensione di classi reali. Eviti @extend all'interno delle media query. Nel Sass moderno, in genere si preferiscono i mixin a @extend perché sono più prevedibili e più facili da sottoporre a debug.