scss实现文字描边

UI同学特别喜欢使用文字描边，但是官方的text-stroke效果一言难尽。目前大家一般会使用text-shadow属性叠加的方式来实现文字描边效果。但是这是编译后的css源代码，我们有scss为什么不用起来呢。

text-shadow: -2px -2px 0 #fff9e6, -2px -1px 0 #fff9e6, -2px -1px 0 #fff9e6, -2px -1px 0 #fff9e6, -2px 0px 0 #fff9e6, -2px 0px 0 #fff9e6, -2px 1px 0 #fff9e6, -2px 1px 0 #fff9e6, -2px 1px 0 #fff9e6, -2px 2px 0 #fff9e6, -1px -2px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 2px 0 #fff9e6, -1px -2px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 2px 0 #fff9e6, -1px -2px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px -1px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 0px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 1px 0 #fff9e6, -1px 2px 0 #fff9e6, 0px -2px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px 0px 0 #fff9e6, 0px 0px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 2px 0 #fff9e6, 0px -2px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px -1px 0 #fff9e6, 0px 0px 0 #fff9e6, 0px 0px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 1px 0 #fff9e6, 0px 2px 0 #fff9e6, 1px -2px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 2px 0 #fff9e6, 1px -2px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 2px 0 #fff9e6, 1px -2px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px -1px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 0px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 1px 0 #fff9e6, 1px 2px 0 #fff9e6, 2px -2px 0 #fff9e6, 2px -1px 0 #fff9e6, 2px -1px 0 #fff9e6, 2px -1px 0 #fff9e6, 2px 0px 0 #fff9e6, 2px 0px 0 #fff9e6, 2px 1px 0 #fff9e6, 2px 1px 0 #fff9e6, 2px 1px 0 #fff9e6, 2px 2px 0 #fff9e6;

代码很简单，通过循环来生成

@mixin textShadow($color) {
    $shadow: ();
    $arr: (-2px, -1px, -1px, -1px, 0px, 0px, 1px, 1px, 1px, 2px);

    @each $i in $arr {
        $str: ();
        @each $j in $arr {
            $str: append($str, ($i $j 0 $color), comma);
        }
        $shadow: append($shadow, $str, comma);
    }
    text-shadow: $shadow;
}

.testShadow {
    @include textShadow(#fff9e6);
}

最终的效果