Accepts hide or unhide values. Default value is set to hide. Use unhide to reserve the affect.


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;