Skip to content
Leave HSL(A) alone! A package enabling HSL to stay HSL in SCSS.
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/functions
.editorconfig
.gitignore
LICENSE
README.md
package.json

README.md

hsl.scss

HSL colors are awesome. Unfortunately, the SASS hsl() and hsla() functions converts the colors to RGB/RGBA format.

hsl.scss replaces the two SASS functions by two others, preserving HSL(A) color declarations.

Installation

  1. npm install hsl.scss pulls the package into your project.
  2. @import '~hsl.scss'; in a SCSS files make hsl() and hsla() available.

Usage

Write regular CSS, the syntax is exactly the same:

:root {

  // hsl()
  color: hsl(15deg, 100%, 50%);

  // separator: coma (`,`)
  --flashy-pink: hsl(15deg, 100%, 50%);

  // separator: space
  $flashy-pink: hsl(15deg 100% 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(15deg 100% 50% / .7);
}

Before / after hsl.scss

Before: lot of issues. Now: no issues anymore.

Before: boring interpolation. Now: standard CSS.

Note

There’s currently no test enforcing the validity of what is passed to hsl() and hsla(), like in CSS. They are passthrough function.

You can’t perform that action at this time.