bulma/docs/documentation/sass/extends.html

---
title: Bulma Sass Extends
layout: docs
theme: sass
doc-tab: sass
doc-subtab: extends
breadcrumb:
  - home
  - documentation
  - sass
  - sass-extends
---



<div class="content">
  <p>
    In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
  </p>

  <p>
    To avoid the repetition, Bulma uses the <code>@extend</code> rule to share code. This rule tells Sass that one selector should inherit the styles of another. <a href="https://sass-lang.com/documentation/at-rules/extend" target="_blank">Learn more about the extend rule</a>.
  </p>

  <p>
    Instead of creating CSS classes that might not be used to be the <strong>source</strong> of the set of styles, Bulma uses Sass <strong>placeholders</strong>:
  </p>

  <ul>
    <li>
      {% include docs/elements/snippet-inline.html content="%control" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%unselectable" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%arrow" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%block" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%delete" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%loader" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%overlay" %}
    </li>
    <li>
      {% include docs/elements/snippet-inline.html content="%reset" %}
    </li>
  </ul>

  {% assign mixins_link = site.data.links.by_id['utilities-mixins'] %}
  {% assign controls_link = site.data.links.by_id['utilities-control-mixins'] %}

  <p>
    Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
  </p>
</div>

{% include docs/elements/anchor.html name="How to use Bulma extends" %}

<div class="content">Import the extend rules with <code>@use</code> and use them with <code>@extend</code>:</div>

{% highlight sass %}
@use "bulma/sass/utilities/extends";

.my-control {
  @extend %control;
  background-color: purple;
  color: white;
}
{% endhighlight %}