Skip to content

Commit

Permalink
Document usage in Dart SASS
Browse files Browse the repository at this point in the history
Closes #5.
  • Loading branch information
meduzen authored Sep 10, 2022
1 parent 447ba4a commit 6f1ace6
Showing 1 changed file with 9 additions and 10 deletions.
19 changes: 9 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
# 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, the [SASS `hsl()` and `hsla()` functions](https://sass-lang.com/documentation/functions/color#hsl) converts the colors to RGB/RGBA format.
[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_ replaces the two SASS functions by two others, preserving HSL(A) color declarations.
_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

1. `npm install hsl.scss` pulls the package into your project.
2. `@import '~hsl.scss';` in a SCSS files make `hsl()` and `hsla()` available.
`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

Write regular CSS, the syntax is exactly the same:
You can now expect `hsl` and `hsla` to behave like they do using standard CSS:

```scss
:root {

Expand All @@ -39,12 +42,8 @@ Write regular CSS, the syntax is exactly the same:
}
```

## Before / after hsl.scss
## Before / after `hsl.scss` when using `node-sass`

![Before: lot of issues. Now: no issues anymore.](https://pbs.twimg.com/media/ECASFaIWkAAHdni?format=jpg&name=large)

![Before: boring interpolation. Now: standard CSS.](https://pbs.twimg.com/media/ECASFaQXoAAjNqe?format=jpg&name=large)

## Note

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

0 comments on commit 6f1ace6

Please sign in to comment.