Visually-hidden mixin. Uses selector-nest to allow showing on focus/active. Generated by SassMeister.com.

visually-hidden.css

.example:not(:focus):not(:active) {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.example2 {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

visually-hidden.scss

// ----
// libsass (v3.3.6)
// ----

@mixin visually-hidden( $focus: false ) {
  @at-root #{if($focus, selector-nest('&:not(:focus):not(:active)'), '&')} {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}

@mixin screen-reader-text( $focus: false ) {
	@include visually-hidden( $focus );
}

.example {
  @include screen-reader-text(true);
}

.example2 {
  @include screen-reader-text;
}