ヾ(oﾟωﾟo)ﾉﾞcss3でテキストに境界線をつけよう！ ref: http://qiita.com/harapeko_wktk/items/48972185efda8ba62280

cssへ出力後

text-shadow:#333 2px 2px 0px,
            #333 -2px 2px 0px,
            #333 2px -2px 0px,
            #333 -2px -2px 0px;
filter:dropshadow(color=$color,offX= 0,offY=-2)
       dropshadow(color=$color,offX= 2,offY= 0)
       dropshadow(color=$color,offX= 0,offY= 2)
       dropshadow(color=$color,offX=-2,offY= 0);

mixin(scss)

@mixin text_outline($color){
  text-shadow: $color 2px 2px 0px,  $color -2px 2px 0px,
               $color 2px -2px 0px, $color -2px -2px 0px;
  /* for IE */
  filter:dropshadow(color=$color,offX= 0,offY=-2)
         dropshadow(color=$color,offX= 2,offY= 0)
         dropshadow(color=$color,offX= 0,offY= 2)
         dropshadow(color=$color,offX=-2,offY= 0);
}

こんな感じで使います(scss)

.test {
  @include text_outline(#333);
}