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 "https://compass-style.org/files/beta-sub/examples/compass/css3/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, 0.6)
$default-text-shadow-blur: 3px
$default-text-shadow-v-offset: 1px
@import https://compass-style.org/files/beta-sub/examples/compass/css3/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, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.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;
}