bulma/docs/documentation/utilities/mixins.html

---
title: Mixins
layout: documentation
doc-tab: utilities
doc-subtab: mixins
breadcrumb:
- home
- documentation
- utilities
- utilities-mixins
---

<div class="content">
  <p>
    Throughout the codebase, Bulma uses Sass mixins to <strong>enhance</strong> and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to <strong>re-use</strong> in your own projects.
  </p>
</div>

{% include elements/anchor.html name="Element Mixins" %}

<h4 class="title is-5">Arrow</h4>

<div class="content">
  <p>
    The <code>arrow()</code> mixin creates a down-facing arrow. The <code>$color</code> parameter defines the color of the arrow.
  </p>
</div>

{% highlight sass %}.bulma-arrow-mixin {
  @include arrow(purple);
}{% endhighlight %}

{% capture arrow %}
<span class="bulma-arrow-mixin"></span>
{% endcapture %}

{% include elements/snippet.html content=arrow %}

<!--  -->

<h4 class="title is-5">Hamburger</h4>

<div class="content">
  <p>
    The <code>hamburger()</code> mixin creates a 16x16px set of <strong>3 horizontal bars</strong> grouped within square. The dimensions of this square are defined by the <code>$dimensions</code> parameter.
  </p>
</div>

{% highlight sass %}.bulma-hamburger-mixin {
  @include hamburger(2.5rem);
}{% endhighlight %}

{% capture hamburger %}
<button class="bulma-hamburger-mixin">
  <span></span>
  <span></span>
  <span></span>
</button>
{% endcapture %}

{% include elements/snippet.html content=hamburger %}

<!--  -->

<h4 class="title is-5">Delete</h4>

<div class="content">
  <p>
    The <code>delete()</code> mixin creates a 20x20px circle containing a <strong>cross</strong>. It comes with 3 modifiers: <code>is-small</code>, <code>is-medium</code> and <code>is-large</code>.
  </p>
</div>

{% highlight sass %}.bulma-delete-mixin {
  @include delete;
}{% endhighlight %}

{% capture delete %}
<button class="bulma-delete-mixin is-small"></button>
<button class="bulma-delete-mixin"></button>
<button class="bulma-delete-mixin is-medium"></button>
<button class="bulma-delete-mixin is-large"></button>
{% endcapture %}

{% include elements/snippet.html content=delete %}

<!--  -->

<h4 class="title is-5">Loader</h4>

<div class="content">
  <p>
    The <code>loader()</code> mixin creates a 1em <strong>spinning circle</strong>.
  </p>
</div>

{% highlight sass %}.bulma-loader-mixin {
  @include loader;
}{% endhighlight %}

{% capture loader %}
<span class="bulma-loader-mixin"></span>
{% endcapture %}

{% include elements/snippet.html content=loader %}

<!--  -->

<h4 class="title is-5">Block</h4>

<div class="content">
  <p>
    The <code>block()</code> mixin adds <strong>spacing</strong> below an element, but only if it's <strong>not the last child</strong>.
    <br>
    The <code>$spacing</code> parameter defines the value of the <code>margin-bottom</code>.
  </p>
</div>

{% highlight sass %}.bulma-block-mixin {
  @include block(1rem);
}{% endhighlight %}

{% capture block %}
<p class="bulma-block-mixin">This element has a margin-bottom.</p>
<p class="bulma-block-mixin">This element too.</p>
<p class="bulma-block-mixin">Not this one because it's the last child.</p>
{% endcapture %}

{% include elements/snippet.html content=block %}

<!--  -->

<h4 class="title is-5">Font Awesome container</h4>

<div class="content">
  <p>
    The <code>fa()</code> mixin creates a <strong>square inline-block element</strong>, ideal for containing a Font Awesome icon, or any other type of icon font.
    <br>
    The first <code>$size</code> parameter defines the icon font size.
    <br>
    The second <code>$dimensions</code> parameter defines the dimensions of the square container.
  </p>
</div>

{% highlight sass %}.bulma-fa-mixin {
  @include fa(1rem, 2rem);
  background-color: lavender; // For demo purposes
}{% endhighlight %}

{% capture fa %}
<span class="bulma-fa-mixin">
  <i class="fas fa-thumbs-up"></i>
</span>
{% endcapture %}

{% include elements/snippet.html content=fa %}

<!--  -->

@include overlay($offset: 0)

@include placeholder

// Tools

@include clearfix

@include center($width, $height: 0)

@include overflow-touch

@include reset

@include unselectable

// RTL

@include ltr

@include rtl

@include ltr-property($property, $spacing, $right: true)

@include ltr-position($spacing, $right: true)