Extend- en placeholder-selectors

Met @extend kan één selector alle stijlen van een andere overnemen. In plaats van code te dupliceren, maakt uitbreiden een gedeelde regelset in de gecompileerde CSS.

Een plaatsvervangende selector (met het voorvoegsel %) definieert een stijlblok dat nooit zelfstandig wordt gecompileerd — alleen wanneer het wordt uitgebreid. Er wordt geen CSS gegenereerd tenzij iets deze selector uitbreidt.

Als je een echte klasse uitbreidt, wordt de volledige selectorcontext van die klasse aan de gecompileerde uitvoer toegevoegd. Plaatsvervangers zijn overzichtelijker — ze leveren alleen gegroepeerde selectors op voor de selectors die ze uitbreiden.

Wanneer meerdere selectors dezelfde plaatsvervangende selector uitbreiden, groepeert Sass ze in één kommagescheiden regel:

@extend heeft belangrijke beperkingen:

• Kan niet binnen mediaquery's worden gebruikt
• Kan onverwachte, grote groepen selectors opleveren wanneer ketens van uitbreidingen ontstaan
• Maakt het moeilijker om gecompileerde CSS terug te voeren naar bronbestanden

Vergelijking:

• @extend: kleinere CSS (gedeelde regels), maar complexe selectorketens en beperkingen binnen mediaquery's
• @mixin: dupliceert declaraties, maar is voorspelbaarder en kan binnen mediaquery's worden gebruikt

In moderne Sass-werkwijzen krijgen mixins over het algemeen de voorkeur boven @extend. HTTP/2 en gzip-compressie maken het dupliceren van declaraties minder belangrijk, terwijl de betere debugbaarheid van mixins zwaarder weegt dan het minimale verschil in CSS-grootte.

@extend (met plaatsvervangers) is geschikt wanneer:

• Meerdere selectors echt dezelfde semantische toestand delen (bijvoorbeeld fouttoestanden)
• Je je niet binnen een mediaquery bevindt
• De basisstijlen stabiel en goed gedefinieerd zijn

Plaatsvervangers werken goed voor hulpsets die lijken op resets en waarvan meerdere componenten de stijlen overnemen:

Sommige stijlgidsen en teams verbieden @extend volledig vanwege de complexiteit en de opgeblazen selectors die het kan veroorzaken. Ken de afwegingen en volg de afspraken van je team.

Met @extend kan een selector de stijlen van een andere selector overnemen, waarbij selectors in gecompileerde CSS worden gegroepeerd. Plaatsvervangers (%name) worden pas bij uitbreiding naar CSS gecompileerd — dit is overzichtelijker dan echte klassen uitbreiden. Vermijd @extend binnen mediaquery's. In moderne Sass krijgen mixins over het algemeen de voorkeur boven @extend vanwege hun voorspelbaarheid en debugbaarheid.