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 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);
}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