Visibility

You can control visibility of elements with visibility utilities without modifying the display.

Apply visibility utilities .visible or .invisible as needed. These utility classes do not modify the display value and do not affect layout, thus .invisible elements will occupy space of the actual element.

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}