Hide

Type: Mixin

@include hide();

* You can call mixins with or without gls- namespace (e.g. @include gls-hide();).

Hide Sass mixin will allow you to improve web accessibility by hiding elements. This will help you to hide some content visually on a web page, while it makes the content to be accessible to assistive technologies like a screen reader.

Github Source Code

Arguments

Name	Type	Description
`$toggle`	`string`	Accepts `hide` or `unhide` values. Default value is set to `hide`. Use `unhide` to reserve the affect.

Examples

Simply call the mixin to make the selected element and all its children visually hidden (but accessible for screen readers).

.element {
  @include hide;
}

//CSS Output
.element {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  white-space: nowrap;
}

Now let’s pass unhide value to reserve the affect.

.element {
  @include hide(unhide);
}

//CSS Output
.element {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
  clip-path: none;
  white-space: inherit;
}