Gerillass
v2.1.0Type: Mixin
@include hide();
* You can call mixins with or without the gls- namespace (e.g. @include gls-hide();).
The Hide Sass mixin allows you to improve web accessibility by hiding elements. It hides content visually on a web page while keeping it accessible to assistive technologies such as screen readers.
Arguments
| Name | Type | Description |
|---|---|---|
$toggle | string | Accepts the values hide and unhide. The default value is hide. Use unhide to reverse the effect. |
Examples
Simply call the mixin to make the selected element and all of its children visually hidden (but still accessible to screen readers).
.element {
@include hide;
}.element {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(100%);
white-space: nowrap;
}Now let's pass the unhide value to reverse the effect.
.element {
@include hide(unhide);
}.element {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
clip-path: none;
white-space: inherit;
}