Now Package More

    hsluv-sass

    2.0.1 • Public • Published

    HSLuv Sass

    Build Status Dependency Status devDependency Status Package Version

    Pure Sass HSLuv implementation.

    This package attempts to match the canonical implementation as closely as possible, but not break sass best practices and common patterns. Important deviations include

    • RGB color components range from 0 to 255, not 0 to 1
    • Testing precision is lowered significantly

    Usage

    Installation

    npm install hsluv-sass
    

    Example

    Create demo.csss:

    With @use:

    @use "./node_modules/hsluv-sass" as hsluv;
    
    .example {
      color: hsluv.hsluv(23.2, 83.4%, 43.7%);
      background-color: hsluv.hpluv(250.4, 100%, 59.1%);
    }

    With @import:

    @import "./node_modules/hsluv-sass";
    
    .example {
      color: hsluv(23.2, 83.4%, 43.7%);
      background-color: hpluv(250.4, 100%, 59.1%);
    }

    Compile:

    $ npx sass demo.scss 

    Emitted css:

    .example {
      color: #a84c27;
      background-color: #738fc0;
    }

    API

    hsluv($hue, $saturation, $lightness) //=> color

    Creates a sass color object in HSLuv color space.

    hpluv($hue, $saturation, $lightness) //=> color

    Creates a sass color object in HPLuv color space.

    hsluva($hue, $saturation, $lightness, $alpha: 1) //=> color

    Creates a sass color object in HSLuv color space with transparency.

    hpluva($hue, $saturation, $lightness, $alpha: 1) //=> color

    Creates a sass color object in HPLuv color space with transparency.

    Parameters

    • $hue — The hue of the color. A number between 0 and 360 degrees, inclusive.
    • $saturation — The saturation of the color. Must be a number between 0% and 100%, inclusive.
    • $lightness — The lightness of the color. Must be a number between 0% and 100%, inclusive.
    • $alpha - The opacity of the color. Must be a number between 0 and 1, inclusive.

    All function support passing an HSL map directly and omitting the $saturation and $lightness parameters. If unitless, the h value must be in radians.

    .example {
      color: hsluv((h: 0.4049164, s: 83.4, l: 43.7));
      background-color: hpluv((h: 4.3703044, s: 100, l: 59.1));
    }

    Testing

    Tested with True. Continuous integration tests againsts the last several version of node on multiple platforms.

    You can locally test after installing npm dependencies. Just run npm test.

    Support

    Have a question or need help? Open an issue

    License

    This project is provided under the terms of the MIT License.

    Original version by Cameron Little · Github · Twitter · CodePen

    Install

    npm i hsluv-sass

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • hsluvcontributors