Visibility

Visibility(ビジビリティ)では要素の表示を変更せずに可視性を制御できます。ビジビリティ ユーティリティの使い方の例を示します。

要素の visibility を設定します。これらのユーティリティクラスは, display の値を全く変更せず, レイアウトに影響を与えません。
.invisible 要素はページ内にスペースを残します。コンテンツは, 視覚的にもスクリーンリーダーのユーザーにも表示しません。 必要に応じて .visible または .invisible を適用します。

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