Have ideas to improve npm?Join in the discussion! »

    sass-text-stroke

    1.2.0 • Public • Published

    Text stroke for Sass

    npm package

    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.

    Comparison screenshot

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

    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

    Install

    npm i sass-text-stroke

    DownloadsWeekly Downloads

    134

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    53 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar