https://github.com/hudochenkov/sass-text-stroke
Text stroke polyfill for Sass.
https://github.com/hudochenkov/sass-text-stroke
Last synced: 10 months ago
JSON representation
Text stroke polyfill for Sass.
- Host: GitHub
- URL: https://github.com/hudochenkov/sass-text-stroke
- Owner: hudochenkov
- Created: 2015-05-31T16:02:49.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T14:16:16.000Z (almost 2 years ago)
- Last Synced: 2025-08-18T05:26:57.521Z (10 months ago)
- Language: SCSS
- Size: 46.9 KB
- Stars: 22
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Text stroke for Sass
[Status of browser support for native CSS text-stroke property.](https://caniuse.com/#feat=text-stroke)
Text stroke polyfill for Sass. You can see why it's better than solutions presented earlier.
[CodePen with example](http://codepen.io/hudochenkov/pen/RPKBoO?editors=110).
[CodePen with example of bad solution](http://codepen.io/hudochenkov/pen/yNgqVg?editors=110).
[CodePen with explanation how it work](http://codepen.io/hudochenkov/pen/BNpxMr?editors=110). 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
````
```scss
// 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`](https://css-tricks.com/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](http://codepen.io/hudochenkov/pen/BNpxMr?editors=110).
_Default: **0**_