Demo: Text-shadow

<div>this text has no shadow</div>
<div class='has-single-shadow'>this text has a shadow</div>
<div class='has-custom-shadow'>this text has a custom shadow</div>

%div this text has no shadow
.has-single-shadow this text has a shadow
.has-custom-shadow this text has a custom shadow

$default-text-shadow-color: rgba(red, 0.6);
$default-text-shadow-blur: 3px;
$default-text-shadow-v-offset: 1px;

@import "compass/css3";

// Uses defaults set before the import above
.has-single-shadow {
  @include single-text-shadow; }

// Can output up to ten text shadows
.has-custom-shadow {
  @include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0); }

$default-text-shadow-color: rgba(red, .6)
$default-text-shadow-blur: 3px
$default-text-shadow-v-offset: 1px

@import compass/css3

// Uses defaults set before the import above
.has-single-shadow
  +single-text-shadow

// Can output up to ten text shadows
.has-custom-shadow
  +text-shadow(rgba(blue, .2) 1px 1px 0, rgba(blue, .2) 2px 2px 0, rgba(blue, .2) 3px 3px 0)

.has-single-shadow {
  text-shadow: rgba(255, 0, 0, 0.6) 0px 1px 3px;
}

.has-custom-shadow {
  text-shadow: rgba(0, 0, 255, 0.2) 1px 1px 0, rgba(0, 0, 255, 0.2) 2px 2px 0, rgba(0, 0, 255, 0.2) 3px 3px 0;
}