sass-hsv#

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/hsv" as *;
@use "sass:list";

a {
    // the simplest
    color: hsv(270, 50%, 100%); // #bf7fff
    // use other angle units for h and unitless percents for s & v
    color: hsv(0.75turn 50 100); // #bf7fff, only with list syntax
    // 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()

    // list syntax (since 2.0)
    color: hsv(270 50% 100%);
    color: hsv(270 50% 100% / 50%); // once it's available in sass
    color: hsv(list.slash(270 50% 100%, 50%)); // available today
}

Upgrade#

2.x to 3.0#

Unitless numbers for saturation and value/brightness changed their meanings:
- In the legacy syntax unitless values are no longer supported and will throw an error
- In the list syntax unitless values changed their meaning from fractions to percents
```
a {
    // these declarations produce the same color:
    color: hsv(0.75turn .5 1); // in 2.x
    color: hsv(0.75turn 50 100); // in 3.x
}
```
  Since 3.0 was released only 18 hours after 2.0, you are unlikely to encounter this incompatibility in your code

1.x to 2.0#

If you used a legacy import ('sass-hsv/legacy') for libsass, it’s no longer available, please stay on 1.x.

License#

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

sass-hsv

Contents