Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meduzen/true-hsl.scss
Let HSL stay HSL in SCSS.
https://github.com/meduzen/true-hsl.scss
css hsl hsl-color hsla sass scss scss-function
Last synced: about 1 month ago
JSON representation
Let HSL stay HSL in SCSS.
- Host: GitHub
- URL: https://github.com/meduzen/true-hsl.scss
- Owner: meduzen
- License: wtfpl
- Created: 2019-08-15T00:41:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-10T13:48:39.000Z (over 2 years ago)
- Last Synced: 2023-12-07T14:03:04.423Z (about 1 year ago)
- Topics: css, hsl, hsl-color, hsla, sass, scss, scss-function
- Language: SCSS
- Homepage:
- Size: 4.88 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hsl.scss
[HSL colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#HSL_colors) [are awesome](https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/). Unfortunately, under `node-sass` the [SASS `hsl()` and `hsla()` functions](https://sass-lang.com/documentation/functions/color#hsl) converts to other formats (hex or RGB/RGBA). And the situation [isn’t better in Dart SASS](https://github.com/meduzen/true-hsl.scss/issues/2).
_hsl.scss_ overwrites SASS `hsl` and `hsla` with passthrough functions, preserving HSL(A) color declarations without transformation nor validation.
- [Demo](https://codepen.io/meduzen/pen/BaBKdBb?editors=0100#0)
- [Tweet](https://twitter.com/meduzen/status/1161948600219459584) with screenshots.
## Installation
`npm install hsl.scss -D` pulls the package into your project.
- In a `node-sass` project, `@import 'hsl.scss';` in a SCSS files make `hsl()` and `hsla()` available.
- In a Dart SASS project, `@use 'hsl.scss' as *` is required in every SCSS files where `hsl()` or `hsla()` are used.
## Usage
You can now expect `hsl` and `hsla` to behave like they do using standard CSS:
```scss
: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` when using `node-sass`
