Mixins

Utility mixins for custom elements and other CSS helpers

Throughout the codebase, Bulma uses Sass mixins to enhance and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to re-use in your own projects.

Element Mixins #

These mixins create a visual HTML element.

Arrow #

The arrow() mixin creates a down-facing arrow. The $color parameter defines the color of the arrow.

.bulma-arrow-mixin {
  @include arrow(purple);
}

示例

HTML

<span class="bulma-arrow-mixin"></span>

Hamburger #

The hamburger() mixin creates a 16x16px set of 3 horizontal bars grouped within square. The dimensions of this square are defined by the $dimensions parameter.

.bulma-hamburger-mixin {
  @include hamburger(2.5rem);
}

示例

HTML

<button class="bulma-hamburger-mixin">
  <span></span>
  <span></span>
  <span></span>
</button>

Delete #

The delete() mixin creates a 20x20px circle containing a cross. It comes with 3 modifiers: is-small, is-medium and is-large.

.bulma-delete-mixin {
  @include delete;
}

示例

HTML

<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>

Loader #

The loader() mixin creates a 1em spinning circle.

.bulma-loader-mixin {
  @include loader;
}

示例

HTML

<span class="bulma-loader-mixin"></span>

Font Awesome container #

The fa() mixin creates a square inline-block element, ideal for containing a Font Awesome icon, or any other type of icon font.
The first $size parameter defines the icon font size.
The second $dimensions parameter defines the dimensions of the square container.

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

示例

HTML

<span class="bulma-fa-mixin">
  <i class="fas fa-thumbs-up"></i>
</span>

CSS Mixins #

These mixins add CSS rules to the element.

Block #

The block() mixin adds spacing below an element, but only if it's not the last child.
The $spacing parameter defines the value of the margin-bottom.

.bulma-block-mixin {
  @include block(1rem);
}

示例

This element has a margin-bottom.

This element too.

Not this one because it's the last child.

HTML

<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>

Overlay #

The overlay() mixin makes the element cover its closest positioned ancestor.
The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).

.bulma-overlay-mixin {
  @include overlay(1.5rem);
  background-color: darkorange;
  border-radius: 0.25em;
  color: white;
  opacity: 0.9;
  padding: 1em;
}

示例

Overlay element

HTML

<div class="bulma-overlay-mixin-parent">
  <div class="bulma-overlay-mixin">Overlay element</div>
</div>

Center #

The center() mixin allows you to absolutely position an element with fixed dimensions at the center of its closest positioned ancestor.
The value of the $width parameter should be the width of the element the mixin is applied on.
Unless the element has square dimensions, the second parameter $height is required and its value should be the height of the element the mixin is applied on.

.bulma-center-mixin {
  @include center;
}

示例

HTML

<div class="bulma-center-mixin-parent">
  <img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
</div>

Placeholder #

The placeholder() mixin allows you to change the style of an input's placeholder.
The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).

.bulma-placeholder-mixin {
  @include placeholder {
    color: lightblue;
  }
}

示例

HTML

<input
  class="input bulma-placeholder-mixin"
  type="text"
  placeholder="I am a styled placeholder"
>

Clearfix #

The clearfix() mixin adds a ::after pseudo-element with a clear: both rule.

.bulma-clearfix-mixin {
  @include clearfix;
}

示例

This is a short image description.

This text is following the clearfix element and is correctly placed after.

HTML

<div class="bulma-clearfix-mixin">
  <img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
  <p>This is a short image description.</p>
</div>

<p>This text is following the clearfix element and is correctly placed after.</p>

Reset #

The reset() mixin applies a soft style reset. This is especially useful for <button> elements.

.bulma-reset-mixin {
  @include reset;
}

示例

HTML

<button>Default button</button>
<button class="bulma-reset-mixin">Reset button</button>

Unselectable #

The unselectable() mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked.

.bulma-unselectable-mixin {
  @include unselectable;
}

示例

This text is selectable.

This text is not selectable.

HTML

<p>This text is selectable.</p>
<p class="bulma-unselectable-mixin">This text is not selectable.</p>

Overflow Touch #

The overflow-touch() mixin add the -webkit-overflow-scrolling: touch; rule to the element.

Direction Mixins #

Left-to-right and Right-to-left Mixins #

Bulma has a global $rtl flag, which allows the framework to output a Right-to-left version of the CSS. By default, this flag's value is set to false. This means the framework output a Left-to-right version.

The mixins @mixin ltr and @mixin rtl are here to output CSS rules based on the value of $rtl:

if $rtl: true, @include ltr outputs nothing
if $rtl: false, @include rtl outputs nothing

This is useful for properties that are specific to the side of an element.

.bulma-ltr-rtl-mixin {
  background-color: lightgreen;
  padding: 0.5em 1em;
  border: 1px solid seagreen;
  margin-right: -1px;

  &:first-child {
    @include ltr {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }

    @include rtl {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }
  }

  &:last-child {
    @include ltr {
      border-bottom-right-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }

    @include rtl {
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em;
    }
  }
}

示例

One Two Three

HTML

<div style="display: flex;">
  <span class="bulma-ltr-rtl-mixin">One</span>
  <span class="bulma-ltr-rtl-mixin">Two</span>
  <span class="bulma-ltr-rtl-mixin">Three</span>
</div>

LTR Position #

The ltr-position() mixin is a quick way to switch between left and right CSS properties when dealing with positioned elements.
The first $spacing parameter defines the value of the offset, whether it's right or left.
The second $right parameter defines if the property outputs right (default) or left.

Here is what the output looks like with a $spacing parameter set to 1rem:

Flag →	`$rtl: false;`	`$rtl: true;`
`@include ltr-position(1rem, true)`	`right: 1rem`	`left: 1rem`
`@include ltr-position(1rem, false)`	`left: 1rem`	`right: 1rem`

Sass source

.bulma-ltr-position-mixin {
  @include ltr-position(1rem, false);
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
}

CSS output

.bulma-ltr-position-mixin {
  left: 1rem;
  border-radius: 0.25em;
  position: absolute;
  top: 1rem;
}

示例

Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

HTML

<div class="bulma-ltr-position-mixin-parent">
  <img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
</div>

LTR Property #

The ltr-property() mixin works like the ltr-position() mixin but allows you to choose which CSS property to set. The mixin will append -right or -left to that property. This is especially useful for margin and padding.
The first $property parameter which property you want to "flip" left and right.
The second $spacing parameter defines the value of the offset, whether it's right or left.
The third $right parameter defines if the property outputs right (default) or left.

Here is what the output looks like with a $spacing parameter set to 1rem:

Flag →	`$rtl: false;`	`$rtl: true;`
`@include ltr-property("margin", 1rem, true)`	`margin-right: 1rem`	`margin-left: 1rem`
`@include ltr-property("margin", 1rem, false)`	`margin-left: 1rem`	`margin-right: 1rem`

Sass source

.bulma-ltr-property-mixin {
  @include ltr-property("margin", 1rem, false);
  border-radius: 0.25em;
}

CSS output

.bulma-ltr-property-mixin {
  margin-left: 1rem;
  border-radius: 0.25em;
}

示例

HTML

<div class="bulma-ltr-property-mixin-parent">
  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
  <img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
</div>