Sass and Compass for Designers

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. ...