<!doctypehtml><html class=no-js lang=en><meta charset=utf-8><meta content=IE=edge http-equiv=X-UA-Compatible><title>
   Sass: @extend
  </title><meta content="Syntactically Awesome Style Sheets"name=description><meta content=width=device-width,initial-scale=1 name=viewport><link href=/feed.xml rel=alternate type=application/atom+xml><link href=https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,400,600|Source+Serif+Pro rel=stylesheet><link href=https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css rel=stylesheet><link href=/assets/css/sass-e6d98773.css rel=stylesheet><noscript><link href=/assets/css/noscript-c6723936.css rel=stylesheet></noscript><script>var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-535380-8']);
  _gaq.push(['_trackPageview']);
  
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();</script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-535380-14', 'sass-lang.com');
  ga('send', 'pageview');</script><body class="documentation documentation_at-rules documentation_at-rules_extend"><header class=sl-r-banner itemscope itemtype=http://schema.org/WPHeader role=banner><div class="sl-c-alert sl-c-alert--info"style="background: #000; padding: 3rem 0; text-align: left;"><div class=sl-l-container><h2 style="margin-top: 0;">Black Lives Matter</h2><p>Sass stands with the protesters against police violence. We encourage our users to <strong> get in the streets and join them if you can </strong> .</div></div><div class=sl-c-pop-stripe></div><div class=sl-l-container><div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"><p class="sl-l-grid__column sl-r-banner__brand"><a href=/> <img alt=Sass height=48 src=/assets/img/logos/logo-b6e1ef6e.svg> </a><nav aria-label="Site navigation"class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper"itemscope itemtype=http://schema.org/SiteNavigationElement role=navigation><ul><li><a href=/install> Install </a><li><a href=/guide> Learn Sass </a><li><a href=/blog> Blog </a><li><a href=/documentation> Documentation </a><li><a href=/community> Get Involved </a><li><label class=visuallyhidden for=s>Search</label> <input class=search id=s name=s placeholder=Search></ul></nav></div></div></header><main class=content id=main-content itemprop=mainContentOfPage role=main><h1 class=sl-l-container>@extend</h1><div class="sl-background--white sl-l-container sl-l-section"><div class=sl-l-medium-holy-grail><div class=sl-l-medium-holy-grail__body><nav aria-label="Content navigation"class=sl-l-medium-holy-grail__navigation role=navigation><div class="sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible"><h2>Contents</h2><ul><li><a class=section href=/documentation/syntax> Syntax </a> <ul><li class=overview><a href=/documentation/syntax> Overview </a><li><a href=/documentation/syntax/parsing> Parsing a Stylesheet </a><li><a href=/documentation/syntax/structure> Structure of a Stylesheet </a><li><a href=/documentation/syntax/comments> Comments </a><li><a href=/documentation/syntax/special-functions> Special Functions </a></ul><li><a class=section href=/documentation/style-rules> Style Rules </a> <ul><li class=overview><a href=/documentation/style-rules> Overview </a><li><a href=/documentation/style-rules/declarations> Property Declarations </a><li><a href=/documentation/style-rules/parent-selector> Parent Selector </a><li><a href=/documentation/style-rules/placeholder-selectors> Placeholder Selectors </a></ul><li><a href=/documentation/variables> Variables </a><li><a href=/documentation/interpolation> Interpolation </a><li><a class="section open selected"href=/documentation/at-rules> At-Rules </a> <ul><li class=overview><a href=/documentation/at-rules> Overview </a><li><a href=/documentation/at-rules/use> <code>
              @use
             </code> </a><li><a href=/documentation/at-rules/forward> <code>
              @forward
             </code> </a><li><a href=/documentation/at-rules/import> <code>
              @import
             </code> </a><li><a href=/documentation/at-rules/mixin> <code>
              @mixin
             </code> and <code>
              @include
             </code> </a><li><a href=/documentation/at-rules/function> <code>
              @function
             </code> </a><li><a class="open selected"href=/documentation/at-rules/extend> <code>
              @extend
             </code> </a><li><a href=/documentation/at-rules/error> <code>
              @error
             </code> </a><li><a href=/documentation/at-rules/warn> <code>
              @warn
             </code> </a><li><a href=/documentation/at-rules/debug> <code>
              @debug
             </code> </a><li><a href=/documentation/at-rules/at-root> <code>
              @at-root
             </code> </a><li><a class=section href=/documentation/at-rules/control> Flow Control </a> <ul><li class=overview><a href=/documentation/at-rules/control> Overview </a><li><a href=/documentation/at-rules/control/if> <code>
                @if
               </code> and <code>
                @else
               </code> </a><li><a href=/documentation/at-rules/control/each> <code>
                @each
               </code> </a><li><a href=/documentation/at-rules/control/for> <code>
                @for
               </code> </a><li><a href=/documentation/at-rules/control/while> <code>
                @while
               </code> </a></ul><li><a href=/documentation/at-rules/css> From CSS </a></ul><li><a class=section href=/documentation/values> Values </a> <ul><li class=overview><a href=/documentation/values> Overview </a><li><a href=/documentation/values/numbers> Numbers </a><li><a href=/documentation/values/strings> Strings </a><li><a href=/documentation/values/colors> Colors </a><li><a href=/documentation/values/lists> Lists </a><li><a href=/documentation/values/maps> Maps </a><li><a href=/documentation/values/booleans> <code>
              true
             </code> and <code>
              false
             </code> </a><li><a href=/documentation/values/null> <code>
              null
             </code> </a><li><a href=/documentation/values/functions> Functions </a></ul><li><a class=section href=/documentation/operators> Operators </a> <ul><li class=overview><a href=/documentation/operators> Overview </a><li><a href=/documentation/operators/equality> Equality </a><li><a href=/documentation/operators/relational> Relational </a><li><a href=/documentation/operators/numeric> Numeric </a><li><a href=/documentation/operators/string> String </a><li><a href=/documentation/operators/boolean> Boolean </a></ul><li><a class=section href=/documentation/modules> Built-In Modules </a> <ul><li class=overview><a href=/documentation/modules> Overview </a><li><a href=/documentation/modules/color> <code>
              sass:color
             </code> </a><li><a href=/documentation/modules/list> <code>
              sass:list
             </code> </a><li><a href=/documentation/modules/map> <code>
              sass:map
             </code> </a><li><a href=/documentation/modules/math> <code>
              sass:math
             </code> </a><li><a href=/documentation/modules/meta> <code>
              sass:meta
             </code> </a><li><a href=/documentation/modules/selector> <code>
              sass:selector
             </code> </a><li><a href=/documentation/modules/string> <code>
              sass:string
             </code> </a></ul><li><a class=section href=/documentation/breaking-changes> Breaking Changes </a> <ul><li class=overview><a href=/documentation/breaking-changes> Overview </a><li><a href=/documentation/breaking-changes/slash-div> <code>
              /
             </code> as Division </a><li><a href=/documentation/breaking-changes/color-units> Color Units </a><li><a href=/documentation/breaking-changes/extend-compound> Extending Compound Selectors </a><li><a href=/documentation/breaking-changes/css-vars> CSS Variable Syntax </a></ul><li><a class=section href=/documentation/cli> Command Line </a> <ul><li class=overview><a href=/documentation/cli> Overview </a><li><a href=/documentation/cli/dart-sass> Dart Sass </a><li><a href=/documentation/cli/ruby-sass> Ruby Sass </a><li><a href=/documentation/cli/migrator> Migrator </a></ul><li><a href=/documentation/js-api> JavaScript API </a></ul></div></nav><div class=sl-l-medium-holy-grail__main><div class=sl-l-large-holy-grail><div class=sl-l-large-holy-grail__body><div class="sl-l-large-holy-grail__complementary sl-l-large-holy-grail__complementary--contents"><nav class="page-sections sl-c-list-navigation-wrapper sl-c-list-navigation-wrapper--collapsible"aria-labelledby=page-sections><h3 id=page-sections>Page Sections</h3><ul><li><a href=#how-it-works> How It Works </a><li><a class=section href=#placeholder-selectors> Placeholder Selectors </a> <ul><li class=overview><a href=#placeholder-selectors> Overview </a><li><a href=#private-placeholders> Private Placeholders </a></ul><li><a href=#extension-scope> Extension Scope </a><li><a href=#mandatory-and-optional-extends> Mandatory and Optional Extends </a><li><a href=#extends-or-mixins> Extends or Mixins? </a><li><a class=section href=#limitations> Limitations </a> <ul><li class=overview><a href=#limitations> Overview </a><li><a href=#disallowed-selectors> Disallowed Selectors </a><li><a href=#html-heuristics> HTML Heuristics </a><li><a href=#extend-in-media> Extend in <code>
                 @media
                </code> </a></ul></ul></nav></div><div class="sl-l-large-holy-grail__main docSearch-content"><div class="sl-l-container sl-l-container--small"><div class=sl-c-introduction><p>There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. For example, the <a href=http://getbem.com/naming/> BEM methodology </a> encourages modifier classes that go on the same elements as block or element classes. But this can create cluttered HTML, it's prone to errors from forgetting to include both classes, and it can bring non-semantic style concerns into your markup.</div><pre class="highlight html"><code><span class=nt>&LTdiv</span> <span class=na>class=</span><span class=s>"error error--serious"</span><span class=nt>></span>
  Oh no! You've been hacked!
<span class=nt>&LT/div></span>
</code></pre>   <pre class="highlight css"><code><span class=nc>.error</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=m>#f00</span><span class=p>;</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=m>#fdd</span><span class=p>;</span>
<span class=p>}</span>

<span class=nc>.error--serious</span> <span class=p>{</span>
  <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span><span class=p>;</span>
<span class=p>}</span>
</code></pre><p>Sass’s <code>
             @extend
            </code> rule solves this. It’s written <code>
             @extend &LTselector>
            </code> , and it tells Sass that one selector should inherit the styles of another.<div class="code-example ui-tabs can-split"style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-1-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-1-sass> Sass </a><li class="ui-tabs-tab css-tab"><a class=ui-tabs-anchor href=#example-1-css> <span class=caps> CSS </span> </a></ul><div class="ui-tabs-panel scss"id=example-1-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nc>.error</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=mh>#f00</span><span class=p>;</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fdd</span><span class=p>;</span>

  <span class=k>&</span><span class=nt>--serious</span> <span class=p>{</span>
    <span class=k>@extend</span> <span class=nc>.error</span><span class=p>;</span>
    <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span><span class=p>;</span>
  <span class=p>}</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-1-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nc>.error</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=mh>#f00</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fdd</span>

  <span class=k>&</span><span class=nt>--serious</span>
    <span class=k>@extend</span> <span class=nc>.error</span>
    <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span>


</code></pre></div><div class="ui-tabs-panel css ui-tabs-panel-inactive"id=example-1-css><h3 class=visuallyhidden><span class=caps> CSS </span>  Output</h3><pre class="highlight css"><code><span class=nc>.error</span><span class=o>,</span> <span class=nc>.error--serious</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=m>#f00</span><span class=p>;</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=m>#fdd</span><span class=p>;</span>
<span class=p>}</span>
<span class=nc>.error--serious</span> <span class=p>{</span>
  <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span><span class=p>;</span>
<span class=p>}</span>


</code></pre></div></div><p>When one class extends another, Sass styles all elements that match the extender as though they also match the class being extended. When one class selector extends another, it works exactly as though you added the extended class to every element in your <span class=caps> HTML </span> that already had the extending class. You can just write <code>
             class="error--serious"
            </code> , and Sass will make sure it’s styled as though it had <code>
             class="error"
            </code> as well.<p>Of course, selectors aren’t just used on their own in style rules. Sass knows to extend <em> everywhere </em> the selector is used. This ensures that your elements are styled exactly as if they matched the extended selector.<div class="code-example ui-tabs can-split"style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-2-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-2-sass> Sass </a><li class="ui-tabs-tab css-tab"><a class=ui-tabs-anchor href=#example-2-css> <span class=caps> CSS </span> </a></ul><div class="ui-tabs-panel scss"id=example-2-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nc>.error</span><span class=nd>:hover</span> <span class=p>{</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fee</span><span class=p>;</span>
<span class=p>}</span>

<span class=nc>.error--serious</span> <span class=p>{</span>
  <span class=k>@extend</span> <span class=nc>.error</span><span class=p>;</span>
  <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-2-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nc>.error</span><span class=nd>:hover</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fee</span>


<span class=nc>.error--serious</span>
  <span class=k>@extend</span> <span class=nc>.error</span>
  <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span>

</code></pre></div><div class="ui-tabs-panel css ui-tabs-panel-inactive"id=example-2-css><h3 class=visuallyhidden><span class=caps> CSS </span>  Output</h3><pre class="highlight css"><code><span class=nc>.error</span><span class=nd>:hover</span><span class=o>,</span> <span class=nc>.error--serious</span><span class=nd>:hover</span> <span class=p>{</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=m>#fee</span><span class=p>;</span>
<span class=p>}</span>

<span class=nc>.error--serious</span> <span class=p>{</span>
  <span class=nl>border-width</span><span class=p>:</span> <span class=m>3px</span><span class=p>;</span>
<span class=p>}</span>

</code></pre></div></div><div class="sl-c-callout sl-c-callout--warning"><h3>⚠️ Heads up!</h3><p>Extends are resolved after the rest of your stylesheet is compiled. In particular, it happens after <a href=../style-rules/parent-selector> parent selectors </a> are resolved. This means that if you <code>
              @extend .error
             </code> , it won’t affect the inner selector in <code>
              .error { &__icon { ... } }
             </code> . It also means that <a href=../style-rules/parent-selector#in-sassscript> parent selectors in SassScript </a> can’t see the results of extend.</div><h2 id=how-it-works><a class=anchor href=#how-it-works> <span class=visuallyhidden> How It Works permalink </span> </a> How It Works</h2><p>Unlike <a href=mixin> mixins </a> , which copy styles into the current style rule,  <code>
             @extend
            </code> updates style rules that contain the extended selector so that they contain the extending selector as well. When extending selectors, Sass does <em> intelligent unification </em> :<ul><li><p>It never generates selectors like <code>
               #main#footer
              </code> that can’t possibly match any elements.</p><li><p>It ensures that complex selectors are interleaved so that they work no matter which order the <span class=caps> HTML </span> elements are nested.</p><li><p>It trims redundant selectors as much as possible, while still ensuring that the specificity is greater than or equal to that of the extender.</p><li><p>It knows when one selector matches everything another does, and can combine them together.</p><li><p>It intelligently handles <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators> combinators </a> , <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors> universal selectors </a> , and <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/:not> pseudo-classes that contain selectors </a> .</p></ul><div class="code-example ui-tabs"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-3-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-3-sass> Sass </a><li class="ui-tabs-tab css-tab"><a class=ui-tabs-anchor href=#example-3-css> <span class=caps> CSS </span> </a></ul><div class="ui-tabs-panel scss"id=example-3-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nc>.content</span> <span class=nt>nav</span><span class=nc>.sidebar</span> <span class=p>{</span>
  <span class=k>@extend</span> <span class=nc>.info</span><span class=p>;</span>
<span class=p>}</span>

<span class=c1>// This won't be extended, because `p` is incompatible with `nav`.
</span><span class=nt>p</span><span class=nc>.info</span> <span class=p>{</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#dee9fc</span><span class=p>;</span>
<span class=p>}</span>

<span class=c1>// There's no way to know whether `&LTdiv class="guide">` will be inside or
// outside `&LTdiv class="content">`, so Sass generates both to be safe.
</span><span class=nc>.guide</span> <span class=nc>.info</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=nb>solid</span> <span class=nf>rgba</span><span class=p>(</span><span class=mh>#000</span><span class=o>,</span> <span class=m>0</span><span class=mi>.8</span><span class=p>);</span>
  <span class=nl>border-radius</span><span class=p>:</span> <span class=m>2px</span><span class=p>;</span>
<span class=p>}</span>

<span class=c1>// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
</span><span class=nt>main</span><span class=nc>.content</span> <span class=nc>.info</span> <span class=p>{</span>
  <span class=nl>font-size</span><span class=p>:</span> <span class=m>0</span><span class=mi>.8em</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-3-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nc>.content</span> <span class=nt>nav</span><span class=nc>.sidebar</span>
  <span class=k>@extend</span> <span class=nc>.info</span>


<span class=c1>// This won't be extended, because `p` is incompatible with `nav`.
</span><span class=nt>p</span><span class=nc>.info</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#dee9fc</span>


<span class=c1>// There's no way to know whether `&LTdiv class="guide">` will be inside or
// outside `&LTdiv class="content">`, so Sass generates both to be safe.
</span><span class=nc>.guide</span> <span class=nc>.info</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=nb>solid</span> <span class=nf>rgba</span><span class=p>(</span><span class=mh>#000</span><span class=o>,</span> <span class=m>0</span><span class=mi>.8</span><span class=p>)</span>
  <span class=nl>border-radius</span><span class=p>:</span> <span class=m>2px</span>


<span class=c1>// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
</span><span class=nt>main</span><span class=nc>.content</span> <span class=nc>.info</span>
  <span class=nl>font-size</span><span class=p>:</span> <span class=m>0</span><span class=mi>.8em</span>

</code></pre></div><div class="ui-tabs-panel css ui-tabs-panel-inactive"id=example-3-css><h3 class=visuallyhidden><span class=caps> CSS </span>  Output</h3><pre class="highlight css"><code><span class=nt>p</span><span class=nc>.info</span> <span class=p>{</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=m>#dee9fc</span><span class=p>;</span>
<span class=p>}</span>

<span class=nc>.guide</span> <span class=nc>.info</span><span class=o>,</span> <span class=nc>.guide</span> <span class=nc>.content</span> <span class=nt>nav</span><span class=nc>.sidebar</span><span class=o>,</span> <span class=nc>.content</span> <span class=nc>.guide</span> <span class=nt>nav</span><span class=nc>.sidebar</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=nb>solid</span> <span class=n>rgba</span><span class=p>(</span><span class=m>0</span><span class=p>,</span> <span class=m>0</span><span class=p>,</span> <span class=m>0</span><span class=p>,</span> <span class=m>0.8</span><span class=p>);</span>
  <span class=nl>border-radius</span><span class=p>:</span> <span class=m>2px</span><span class=p>;</span>
<span class=p>}</span>

<span class=nt>main</span><span class=nc>.content</span> <span class=nc>.info</span><span class=o>,</span> <span class=nt>main</span><span class=nc>.content</span> <span class=nt>nav</span><span class=nc>.sidebar</span> <span class=p>{</span>
  <span class=nl>font-size</span><span class=p>:</span> <span class=m>0.8em</span><span class=p>;</span>
<span class=p>}</span>









</code></pre></div></div><div class="sl-c-callout sl-c-callout--fun-fact"><h3>💡 Fun fact:</h3><p>You can directly access Sass’s intelligent unification using <a href=../modules/selector> selector functions </a> ! The <a href=../modules/selector#unify> <code>
               selector.unify()
              </code> function </a> returns a selector that matches the intersection of two selectors, while the <a href=../modules/selector#extend> <code>
               selector.extend()
              </code> function </a> works just like <code>
              @extend
             </code> , but on a single selector.</div><div class="sl-c-callout sl-c-callout--warning"><h3>⚠️ Heads up!</h3><p>Because <code>
              @extend
             </code> updates style rules that contain the extended selector, their styles have precedence in <a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade> the cascade </a> based on where the extended selector’s style rules appear, <em> not </em> based on where the <code>
              @extend
             </code> appears. This can be confusing, but just remember: this is the same precedence those rules would have if you added the extended class to your  <span class=caps> HTML </span> !</div><h2 id=placeholder-selectors><a class=anchor href=#placeholder-selectors> <span class=visuallyhidden> Placeholder Selectors permalink </span> </a> Placeholder Selectors</h2><p>Sometimes you want to write a style rule that’s <em> only </em> intended to be extended. In that case, you can use <a href=../style-rules/placeholder-selectors> placeholder selectors </a> , which look like class selectors that start with <code>
             %
            </code> instead of <code>
             .
            </code> . Any selectors that include placeholders aren’t included in the <span class=caps> CSS </span> output, but selectors that extend them are.<div class="code-example ui-tabs can-split"style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-4-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-4-sass> Sass </a><li class="ui-tabs-tab css-tab"><a class=ui-tabs-anchor href=#example-4-css> <span class=caps> CSS </span> </a></ul><div class="ui-tabs-panel scss"id=example-4-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nc>.alert</span><span class=nd>:hover</span><span class=o>,</span> <span class=nv>%strong-alert</span> <span class=p>{</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span><span class=p>;</span>
<span class=p>}</span>

<span class=nv>%strong-alert</span><span class=nd>:hover</span> <span class=p>{</span>
  <span class=nl>color</span><span class=p>:</span> <span class=no>red</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-4-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nc>.alert</span><span class=nd>:hover</span><span class=o>,</span> <span class=nv>%strong-alert</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span>


<span class=nv>%strong-alert</span><span class=nd>:hover</span> 
  <span class=nl>color</span><span class=p>:</span> <span class=no>red</span>

</code></pre></div><div class="ui-tabs-panel css ui-tabs-panel-inactive"id=example-4-css><h3 class=visuallyhidden><span class=caps> CSS </span>  Output</h3><pre class="highlight css"><code><span class=nc>.alert</span><span class=nd>:hover</span> <span class=p>{</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span><span class=p>;</span>
<span class=p>}</span>




</code></pre></div></div><h3 id=private-placeholders><a class=anchor href=#private-placeholders> <span class=visuallyhidden> Private Placeholders permalink </span> </a> Private Placeholders</h3><p>Like <a href=use#private-members> module members </a> , a placeholder selector can be marked private by starting its name with either <code>
             -
            </code> or <code>
             _
            </code> . A private placeholder selector can only be extended within the stylesheet that defines it. To any other stylesheets, it will look as though that selector doesn’t exist.<h2 id=extension-scope><a class=anchor href=#extension-scope> <span class=visuallyhidden> Extension Scope permalink </span> </a> Extension Scope</h2><p>When one stylesheet extends a selector, that extension will only affect style rules written in <em> upstream </em> modules—that is, modules that are loaded by that stylesheet using the <a href=use> <code>
              @use
             </code> rule </a> or the <a href=forward> <code>
              @forward
             </code> rule </a> , modules loaded by <em> those </em> modules, and so on. This helps make your <code>
             @extend
            </code> rules more predictable, ensuring that they affect only the styles you were aware of when you wrote them.<div class="sl-c-callout sl-c-callout--warning"><h3>⚠️ Heads up!</h3><p>Extensions aren’t scoped at all if you’re using the <a href=import> <code>
               @import
              </code> rule </a> . Not only will they affect every stylesheet you import, they’ll affect every stylesheet that imports your stylesheet, everything else those stylesheets import, and so on. Without <code>
              @use
             </code> , extensions are <em> global </em> .</div><h2 id=mandatory-and-optional-extends><a class=anchor href=#mandatory-and-optional-extends> <span class=visuallyhidden> Mandatory and Optional Extends permalink </span> </a> Mandatory and Optional Extends</h2><p>Normally, if an <code>
             @extend
            </code> doesn’t match any selectors in the stylesheet, Sass will produce an error. This helps protect from typos or from renaming a selector without renaming the selectors that inherit from it. Extends that require that the extended selector exists are <em> mandatory </em> .<p>This may not always be what you want, though. If you want the <code>
             @extend
            </code> to do nothing if the extended selector doesn’t exist, just add <code>
             !optional
            </code> to the end.<h2 id=extends-or-mixins><a class=anchor href=#extends-or-mixins> <span class=visuallyhidden> Extends or Mixins? permalink </span> </a> Extends or Mixins?</h2><p>Extends and <a href=mixin> mixins </a> are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which one. Mixins are obviously necessary when you need to configure the styles using <a href=mixin#arguments> arguments </a> , but what if they’re just a chunk of styles?<p>As a rule of thumb, extends are the best option when you’re expressing a relationship between semantic classes (or other semantic selectors). Because an element with class <code>
             .error--serious
            </code> <em> is an </em> error, it makes sense for it to extend <code>
             .error
            </code> . But for non-semantic collections of styles, writing a mixin can avoid cascade headaches and make it easier to configure down the line.<div class="sl-c-callout sl-c-callout--fun-fact"><h3>💡 Fun fact:</h3><p>Most web servers compress the <span class=caps> CSS </span> they serve using an algorithm that’s very good at handling repeated chunks of identical text. This means that, although mixins may produce more <span class=caps> CSS </span> than extends, they probably won’t substantially increase the amount your users need to download. So choose the feature that makes the most sense for your use-case, not the one that generates the least  <span class=caps> CSS </span> !</div><h2 id=limitations><a class=anchor href=#limitations> <span class=visuallyhidden> Limitations permalink </span> </a> Limitations</h2><h3 id=disallowed-selectors><a class=anchor href=#disallowed-selectors> <span class=visuallyhidden> Disallowed Selectors permalink </span> </a> Disallowed Selectors</h3><dl class="impl-status sl-c-description-list sl-c-description-list--horizontal"><div class=compatibility>Compatibility (No Compound Extensions):</div><div><dt>Dart Sass<dd>✓</div><div><dt>LibSass<dd>✗</div><div><dt>Ruby Sass<dd>✗</div><div><a> ▶ </a></div></dl><div class="sl-c-callout sl-c-callout--impl-status"><p>LibSass and Ruby Sass currently allow compound selectors like <code>
              .message.info
             </code> to be extended. However, this behavior doesn’t match the definition of <code>
              @extend
             </code> : instead of styling elements that match the extending selector as though it had <code>
              class="message info"
             </code> , which would be affected by style rules that included either <code>
              .message
             </code> <em> or </em> <code>
              .info
             </code> , it only styled them with rules that included both <code>
              .message
             </code> <em> and </em>   <code>
              info
             </code> .<p>In order to keep the definition of <code>
              @extend
             </code> straightforward and understandable, and to keep the implementation clean and efficient, that behavior is now deprecated and will be removed from future versions.<p>See <a href=../breaking-changes/extend-compound> the breaking change page </a> for more details.</div><p>Only <em> simple selectors </em> —individual selectors like <code>
             .info
            </code> or <code>
             a
            </code> —can be extended. If <code>
             .message.info
            </code> could be extended, the definition of <code>
             @extend
            </code>  says that elements matching the extender would be styled as though they matched <code>
             .message.info
            </code> . That’s just the same as matching both <code>
             .message
            </code> and  <code>
             .info
            </code> , so there wouldn’t be any benefit in writing that instead of <code>
             @extend .message, .info
            </code> .<p>Similarly, if <code>
             .main .info
            </code> could be extended, it would do (almost) the same thing as extending <code>
             .info
            </code> on its own. The subtle differences aren’t worth the confusion of looking like it’s doing something substantially different, so this isn’t allowed either.<div class="code-example ui-tabs"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-5-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-5-sass> Sass </a></ul><div class="ui-tabs-panel scss"id=example-5-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nc>.alert</span> <span class=p>{</span>
  <span class=k>@extend</span> <span class=nc>.message.info</span><span class=p>;</span>
  <span class=c1>//      ^^^^^^^^^^^^^
</span>  <span class=c1>// Error: Write @extend .message, .info instead.
</span>
  <span class=k>@extend</span> <span class=nc>.main</span> <span class=nc>.info</span><span class=p>;</span>
  <span class=c1>//      ^^^^^^^^^^^
</span>  <span class=c1>// Error: write @extend .info instead.
</span><span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-5-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nc>.alert</span>
  <span class=k>@extend</span> <span class=nc>.message.info</span>
  <span class=c1>//      ^^^^^^^^^^^^^
</span>  <span class=c1>// Error: Write @extend .message, .info instead.
</span>
  <span class=k>@extend</span> <span class=nc>.main</span> <span class=nc>.info</span>
  <span class=c1>//      ^^^^^^^^^^^
</span>  <span class=c1>// Error: write @extend .info instead.
</span>
</code></pre></div></div><h3 id=html-heuristics><a class=anchor href=#html-heuristics> <span class=visuallyhidden> <span class=caps> HTML </span> Heuristics permalink </span> </a> <span class=caps> HTML </span>  Heuristics</h3><p>When <code>
             @extend
            </code> <a href=#how-it-works> interleaves complex selectors </a> , it doesn’t generate all possible combinations of ancestor selectors. Many of the selectors it could generate are unlikely to actually match real <span class=caps> HTML </span> , and generating them all would make stylesheets way too big for very little real value. Instead, it uses a <a href=https://en.wikipedia.org/wiki/Heuristic> heuristic </a> : it assumes that each selector’s ancestors will be self-contained, without being interleaved with any other selector’s ancestors.<div class="code-example ui-tabs"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-6-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-6-sass> Sass </a><li class="ui-tabs-tab css-tab"><a class=ui-tabs-anchor href=#example-6-css> <span class=caps> CSS </span> </a></ul><div class="ui-tabs-panel scss"id=example-6-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=nt>header</span> <span class=nc>.warning</span> <span class=nt>li</span> <span class=p>{</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span><span class=p>;</span>
<span class=p>}</span>

<span class=nt>aside</span> <span class=nc>.notice</span> <span class=nt>dd</span> <span class=p>{</span>
  <span class=c1>// Sass doesn't generate CSS to match the &LTdd> in
</span>  <span class=c1>//
</span>  <span class=c1>// &LTheader>
</span>  <span class=c1>//   &LTaside>
</span>  <span class=c1>//     &LTdiv class="warning">
</span>  <span class=c1>//       &LTdiv class="notice">
</span>  <span class=c1>//         &LTdd>...&LT/dd>
</span>  <span class=c1>//       &LT/div>
</span>  <span class=c1>//     &LT/div>
</span>  <span class=c1>//   &LT/aside>
</span>  <span class=c1>// &LT/header>
</span>  <span class=c1>//
</span>  <span class=c1>// because matching all elements like that would require us to generate nine
</span>  <span class=c1>// new selectors instead of just two.
</span>  <span class=k>@extend</span> <span class=nt>li</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-6-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=nt>header</span> <span class=nc>.warning</span> <span class=nt>li</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span>


<span class=nt>aside</span> <span class=nc>.notice</span> <span class=nt>dd</span>
  <span class=c1>// Sass doesn't generate CSS to match the &LTdd> in
</span>  <span class=c1>//
</span>  <span class=c1>// &LTheader>
</span>  <span class=c1>//   &LTaside>
</span>  <span class=c1>//     &LTdiv class="warning">
</span>  <span class=c1>//       &LTdiv class="notice">
</span>  <span class=c1>//         &LTdd>...&LT/dd>
</span>  <span class=c1>//       &LT/div>
</span>  <span class=c1>//     &LT/div>
</span>  <span class=c1>//   &LT/aside>
</span>  <span class=c1>// &LT/header>
</span>  <span class=c1>//
</span>  <span class=c1>// because matching all elements like that would require us to generate nine
</span>  <span class=c1>// new selectors instead of just two.
</span>  <span class=k>@extend</span> <span class=nt>li</span>

</code></pre></div><div class="ui-tabs-panel css ui-tabs-panel-inactive"id=example-6-css><h3 class=visuallyhidden><span class=caps> CSS </span>  Output</h3><pre class="highlight css"><code><span class=nt>header</span> <span class=nc>.warning</span> <span class=nt>li</span><span class=o>,</span> <span class=nt>header</span> <span class=nc>.warning</span> <span class=nt>aside</span> <span class=nc>.notice</span> <span class=nt>dd</span><span class=o>,</span> <span class=nt>aside</span> <span class=nc>.notice</span> <span class=nt>header</span> <span class=nc>.warning</span> <span class=nt>dd</span> <span class=p>{</span>
  <span class=nl>font-weight</span><span class=p>:</span> <span class=nb>bold</span><span class=p>;</span>
<span class=p>}</span>


















</code></pre></div></div><h3 id=extend-in-media><a class=anchor href=#extend-in-media> <span class=visuallyhidden> Extend in @media permalink </span> </a> Extend in  <code>
             @media
            </code></h3><p>While <code>
             @extend
            </code> is allowed within <a href=css> <code>
              @media
             </code> and other <span class=caps> CSS </span> at-rules </a> , it’s not allowed to extend selectors that appear outside its at-rule. This is because the extending selector only applies within the given media context, and there’s no way to make sure that restriction is preserved in the generated selector without duplicating the entire style rule.<div class="code-example ui-tabs"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"><a class=ui-tabs-anchor href=#example-7-scss> <span class=caps> SCSS </span> </a><li class=ui-tabs-tab><a class=ui-tabs-anchor href=#example-7-sass> Sass </a></ul><div class="ui-tabs-panel scss"id=example-7-scss><h3 class=visuallyhidden><span class=caps> SCSS </span>  Syntax</h3><pre class="highlight scss"><code><span class=k>@media</span> <span class=n>screen</span> <span class=nf>and</span> <span class=p>(</span><span class=n>max-width</span><span class=o>:</span> <span class=m>600px</span><span class=p>)</span> <span class=p>{</span>
  <span class=nc>.error--serious</span> <span class=p>{</span>
    <span class=k>@extend</span> <span class=nc>.error</span><span class=p>;</span>
    <span class=c1>//      ^^^^^^
</span>    <span class=c1>// Error: ".error" was extended in @media, but used outside it.
</span>  <span class=p>}</span>
<span class=p>}</span>

<span class=nc>.error</span> <span class=p>{</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=mh>#f00</span><span class=p>;</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fdd</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><div class="ui-tabs-panel sass ui-tabs-panel-inactive"id=example-7-sass><h3 class=visuallyhidden>Sass Syntax</h3><pre class="highlight sass"><code><span class=k>@media</span> <span class=n>screen</span> <span class=nf>and</span> <span class=p>(</span><span class=n>max-width</span><span class=o>:</span> <span class=m>600px</span><span class=p>)</span>
  <span class=nc>.error--serious</span>
    <span class=k>@extend</span> <span class=nc>.error</span>
    <span class=c1>//      ^^^^^^
</span>    <span class=c1>// Error: ".error" was extended in @media, but used outside it.
</span>


<span class=nc>.error</span>
  <span class=nl>border</span><span class=p>:</span> <span class=m>1px</span> <span class=mh>#f00</span>
  <span class=nl>background-color</span><span class=p>:</span> <span class=mh>#fdd</span>

</code></pre></div></div></div></div></div></div></div></div></div></div><div class=sl-c-alert><div class="sl-l-container sl-c-list-horizontal-wrapper"aria-labelledby=release-nav><ul class=sl-l-grid--justify-center><li id=release-nav>Current Releases:<li><span class=release-name> <a href=/dart-sass> Dart Sass </a> <a href=https://github.com/sass/dart-sass/releases/tag/1.34.1> 1.34.1 </a> </span><li><span class=release-name> <a href=/libsass> LibSass </a> <a href=https://github.com/sass/libsass/releases/tag/3.6.5> 3.6.5 </a> </span><li><span class=release-name> <a href=/ruby-sass> Ruby Sass </a> <span aria-label=coffin role=presentation> ⚰ </span> </span><li class="sl-l-grid__column sl-l-large-grid__column--auto-size"><a href=/implementation> Implementation Guide </a></ul></div></div></main><footer class="site-footer contentinfo"itemscope itemtype=http://schema.org/WPFooter role=contentinfo><div class="sl-l-container sl-l-section"><div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"><div class=sl-l-grid__column><p>Sass © 2006–2021 the Sass team, and numerous contributors. It is available for use and modification under the <a href=https://github.com/sass/dart-sass/blob/master/LICENSE> MIT License </a> .<nav class=sl-c-list-horizontal-wrapper><ul><li><a href=https://github.com/sass> Sass on GitHub </a><li><a href=https://github.com/sass/sass-site> Website Source Code </a><li><a href=/styleguide> Style Guide </a><li><a href=/community-guidelines> Community Guidelines </a></ul></nav></div><div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right"><a class=twitter-follow-button data-show-count=false data-size=large href=https://twitter.com/SassCSS> Follow @SassCSS </a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div></div></div></footer><script src=https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js></script><script>docsearch({
    apiKey: 'a409ff5d6a2476083c1a8dd1f8c04ec5',
    indexName: 'sass-lang',
    inputSelector: 'input.search',
    transformData: function(hits) {
      var domain = window.location.origin + "/";
      hits.forEach(function(hit) {
        if (!hit.url.startsWith(domain)) {
          hit.url = hit.url.replace(/^https?:\/\/[^\/]+\//, domain);
        }
      });
      return hits;
    },
    debug: false
  });</script><script src=/assets/js/sass-626156c6.js></script>