sass-hsv

sass-hsv#

npm GitLab GitHub Bitbucket Gitea

A simple helper to introduce HSV/HSB model support to SASS.

Usage#

The helper tries to mimic hsl() syntax from css.

Dart Sass#

Just import the module:

// adjust for your favorite importer
@use "~sass-hsv" as *;

a {
    // the simplest
    color: hsv(270, 50%, 100%); // #bf7fff
    // use other angle units for h and fractions for s & v
    color: hsv(0.75turn, 0.5, 1); // #bf7fff
    // use alpha channel
    color: hsv(270, 50%, 100%, 0.5); // rgba(191, 127, 255, 0.5)

    // aliases
    color: hsb(270, 50%, 100%); // same as hsv()
    color: hsva(270, 50%, 100%, 1); // same as hsv($h, $s, $v, $a) but alpha param is required
    color: hsba(270, 50%, 100%, 1); // same as hsva()
}

libsass#

The package is designed for sass / Dart Sass with modules but it has support of node-sass / libsass. You need to import the legacy module explicitly:

// adjust for your favorite importer
@import "~sass-hsv/legacy"

a {
    color: hsv(270, 50%, 100%); // #bf7fff
}

License#

The library is available as open source under the terms of the MIT License.