Compass's text replacement mixins

Compass has a few mixins to help deal with occasions when you want to hide text. Let's look at some of those.

The hide-text mixin

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:

The squish-text mixin

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