Text stroke for Sass

Status of browser support for native CSS text-stroke property.

Text stroke polyfill for Sass. You can see why it's better than solutions presented earlier.

CodePen with example.

CodePen with example of bad solution.

CodePen with explanation how it work. Instead of text-shadow for all pixels, function returns only needed text-shadows.

Tip

This polyfill applies the stroke to the outside of the text compared to native -webkit-text-stroke which applies it to the inside, so this polyfill may still be interesting for you even after -webkit-text-stroke has become supported by all browsers.

Usage

$ yarn add --dev sass-text-stroke
# or for npm
$ npm install --save-dev sass-text-stroke

// For eyeglass import:
@import "text-stroke";

// ...or for webpack import:
@import "~sass-text-stroke/_text-stroke";


$size: 5;
$color: #bada55;
$correction: 0;

h1 {
    @include text-stroke($size, $color, $correction);
}
p {
    @include text-stroke(4, #369);
}
span {
    text-shadow: text-stroke(4, #369);
}

Tip: You can use currentColor as $color to let the outline automatically have the same color as the color property!

Options

size

Size in pixels (without units).

Default: 2

color

Any CSS color.

Default: #fff

correction

Corrects rounding and reduces text-shadows. For better understanding see this CodePen.

Default: 0