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. ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.