diff --git a/_legacy.scss b/_legacy.scss new file mode 100644 index 0000000..6935c81 --- /dev/null +++ b/_legacy.scss @@ -0,0 +1,56 @@ +@function hsv($h, $s, $v, $a: 1) { + // normalize h to degrees + $h: (0deg + $h) / 1deg; + $h: $h % 360; + + // normalize s to fractions + @if (not unitless($s)) { + $s: $s / 100%; + } + + // normalize v to fractions + @if (not unitless($v)) { + $v: $v / 100%; + } + + // https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB + $c: $s * $v; + $h1: $h / 60; + $x: $c * (1 - abs($h1 % 2 - 1)); + + $r1: none; $g1: none; $b1: none; + @if ($h1 < 1) { + $r1: $c; $g1: $x; $b1: 0; + } @else if($h1 < 2) { + $r1: $x; $g1: $c; $b1: 0; + } @else if($h1 < 3) { + $r1: 0; $g1: $c; $b1: $x; + } @else if($h1 < 4) { + $r1: 0; $g1: $x; $b1: $c; + } @else if($h1 < 5) { + $r1: $x; $g1: 0; $b1: $c; + } @else { + $r1: $c; $g1: 0; $b1: $x; + } + + $m: $v - $c; + $r: floor(($r1 + $m) * 255); + $g: floor(($g1 + $m) * 255); + $b: floor(($b1 + $m) * 255); + + @return rgba($r, $g, $b, $a); +} + +// some aliases + +@function hsva($h, $s, $v, $a) { + @return hsv($h, $s, $v, $a); +} + +@function hsb($h, $s, $b, $a: 1) { + @return hsv($h, $s, $b, $a); +} + +@function hsba($h, $s, $b, $a) { + @return hsv($h, $s, $b, $a); +} diff --git a/docs/index.rst b/docs/index.rst index b082035..302af10 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -12,6 +12,11 @@ The helper tries to mimic ``hsl()`` syntax from css. The easiest way to import the helper is to use node-sass-package-importer_. +Dart Sass +--------- + +Just import the module: + .. code-block:: scss // node-sass-package-importer path syntax, adjust for your favorite importer @@ -31,6 +36,21 @@ The easiest way to import the helper is to use node-sass-package-importer_. color: hsba(270, 50%, 100%, 1); // same as hsva() } +libsass +------- + +The package is designed for `sass` / Dart Sass with modules but it has support of `node-sass` / `libsass`. +You need to import the legacy module explicitly: + +.. code-block:: + + // node-sass-package-importer path syntax, adjust for your favorite importer + @import "~sass-hsv/legacy" + + a { + color: hsv(270, 50%, 100%); // #bf7fff + } + License ======= diff --git a/package.json b/package.json index c50b471..134e47d 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,11 @@ "url": "https://sandfox.me/" }, "sass": "_hsv.scss", + "scripts": { + "test": "mocha" + }, "devDependencies": { + "chai": "^4.3.4", "mocha": "^9.1.1", "node-sass": "*", "sass": "*" diff --git a/tests/spec/node-sass.js b/tests/spec/node-sass.js new file mode 100644 index 0000000..fd7b490 --- /dev/null +++ b/tests/spec/node-sass.js @@ -0,0 +1,18 @@ +'use strict'; + +const chai = require('chai'); +const assert = chai.assert; + +it('works with node-sass', function () { + const sass = require('node-sass'); + const fs = require('fs'); + + const actual = sass.renderSync({ + file: __dirname + '/sass/node-sass.scss', + outputStyle: 'compressed', + }).css; + + const expected = fs.readFileSync(__dirname + '/sass/node-sass-result.css'); + + assert.equal(actual.toString(), expected.toString()); +}); diff --git a/tests/spec/sass/node-sass-result.css b/tests/spec/sass/node-sass-result.css new file mode 100644 index 0000000..f23aa6f --- /dev/null +++ b/tests/spec/sass/node-sass-result.css @@ -0,0 +1 @@ +a{color:#bf7fff} diff --git a/tests/spec/sass/node-sass.scss b/tests/spec/sass/node-sass.scss new file mode 100644 index 0000000..2ccf04a --- /dev/null +++ b/tests/spec/sass/node-sass.scss @@ -0,0 +1,5 @@ +@import "hsv-legacy"; + +a { + color: hsv(270, 50%, 100%); +}