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);
}