Compass Text Replacement

Compass Text Replacement

The next example is very short but I used it in every project I made since I discovered compass. We will see how to replace text with an image. There is many benefits to this: better semantics, better SEO... And this is a very quick way to insert your company name and replace it later with your logo when your designer has finished it with only one line of css.

The markup

When I said this example is very short, i wasn't kidding.

<div id="container">
  <h1 id="logo">Compass</h1>
</div>

This is how your header should be: A plain h1 element. SEO robots will parse your website in a micro-second and say: OMG! This is your company website, this page must be very cool.

The style

When you will be ranked #1 on google with this new trick, you will find interesting to have a kick ass logo to show to your visitor. So you get your designer skills and design a beautiful logo and throw these lines of scss :

@import "compass/typography/text/replacement";

#logo {
  @include replace-text-with-dimensions('compass.png');
}

Now you website will rocks and gets a conversion rates of 200%

Last words

Well, I may have been drinking a bit too much lately and you probably won't get an higher conversion rate. Nevertheless, text-replacement is a pain in css and compass helps a lot with this rocking one-liner. Thank you so much compass!