Compass Text Replacement

This file can be imported using: @import "compass/utilities/text/replacement"

Mixins

replace-text($img, $x, $y)

=replace-text($img, $x: 50%, $y: 50%)
  +hide-text
  background:
    image: image-url($img)
    repeat: no-repeat
    position: $x $y

@mixin replace-text($img, $x: 50%, $y: 50%) {
  @include hide-text;
  background: {
    image: image-url($img);
    repeat: no-repeat;
    position: $x $y; }; }

Hides html text and replaces it with an image. If you use this on an inline element, you will need to change the display to block or inline-block. Also, if the size of the image differs significantly from the font size, you’ll need to set the width and/or height.

Parameters:

img — the relative path from the project image directory to the image.
x — the x position of the background image.
y — the y position of the background image.

view source

replace-text-with-dimensions($img, $x, $y)

=replace-text-with-dimensions($img, $x: 50%, $y: 50%)
  +replace-text($img, $x, $y)
  width: image-width($img)
  height: image-height($img)

@mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%) {
  @include replace-text($img, $x, $y);
  width: image-width($img);
  height: image-height($img); }

Like the replace-text mixin, but also sets the width and height of the element according the dimensions of the image.

view source

hide-text

=hide-text
  $approximate_em_value: 12px / 1em
  $wider_than_any_screen: -9999em
  text-indent: $wider_than_any_screen * $approximate_em_value
  overflow: hidden
  text-align: left

@mixin hide-text {
  $approximate_em_value: 12px / 1em;
  $wider_than_any_screen: -9999em;
  text-indent: $wider_than_any_screen * $approximate_em_value;
  overflow: hidden;
  text-align: left; }

Hides text in an element so you can see the background.