可視性

可視性ユーティリティを使って、要素の表示形式を変更せずに、可視性を制御します。

可視性ユーティリティを使って、要素の visibility を設定します。これらのユーティリティクラスは display の値をまったく変更せず、レイアウトに影響しません。.invisible の要素はそのままページ内のスペースを占めます。コンテンツは、視覚的にも支援技術やスクリーンリーダーのユーザにも隠されます。

必要に応じて .visible または .invisible を適用します。

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

// クラス
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// ミックスインとして使用
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}