Scss Visible & invisible

visible_invisible.scss

// Hide elements visually, but keep them available for screen-readers.
//
// Used for information required for screen-reader users to understand and use
// the site where visual display is undesirable. Information provided in this
// manner should be kept concise, to avoid unnecessary burden on the user.
// "!important" is used to prevent unintentional overrides.
@mixin element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

%element-invisible {
  @include element-invisible;
}

.invisible {
  @extend %element-invisible;
}

// Reverts 'element-invisible'.
@mixin element-visible {
  position: inherit !important;
  clip: inherit;
  overflow: inherit;
  height: inherit;
}

%element-visible {
  @include element-visible;
}