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:0px 1px 3px rgba(255,0,0,0.6)}.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}