The first one we'll look at is the hide-text mixin. This is how it looks:

@include hide-text;

Here's an example of how you would use it:

.hide-text {
  @include hide-text;
}

Here's the CSS it produces:

 .hide-text {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
 }

Now, that certainly gets the job done. If the @include hide-text mixin is added to the ir selector, it shifts the text accordingly. However, be aware that to do this, the browser is painting a box with the text in 119988px off the screen. That's not really an issue on desktop machines but it may be on mobile devices. Some alternative techniques are listed as follows, however, for now, here is the effect in the browser:

Compass also has a mixin called squish-text to squish text inline if you want it to be visually hidden but still accessible...