Repository files navigation

HSL colorsare awesome. Unfortunately, undernode-sass theSASShsl() andhsla() functions converts to other formats (hex or RGB/RGBA). And the situationisn’t better in Dart SASS.

hsl.scss overwrites SASShsl andhsla with passthrough functions, preserving HSL(A) color declarations without transformation nor validation.

• Demo
• Tweet with screenshots.

npm install hsl.scss -D pulls the package into your project.

• In anode-sass project,@import 'hsl.scss'; in a SCSS files makehsl() andhsla() available.
• In a Dart SASS project,@use 'hsl.scss' as * is required in every SCSS files wherehsl() orhsla() are used.

You can now expecthsl andhsla to behave like they do using standard CSS:

:root {// hsl()color:hsl(15deg,100%,50%);// separator: coma (`,`)--flashy-pink:hsl(15deg,100%,50%);// separator: space$flashy-pink:hsl(15deg100%50%);// hsl() accepts opacity as fourth parameter          👇--hue:15deg;--transparent-flashy-pink:hsl(var(--hue),100%,50%,.7);// hsla()$transparent-flashy-pink:hsla(15deg,100%,50%,.7);// hsla(): opacity after a slash (`/`) when separator is a space$transparent-flashy-pink:hsla(15deg100%50%/.7);}