variable color in RGB or HSL format are output as HEX

[jimblue]

• NPM version (npm -v): 6.0.1
• Node version (node -v): 10.0.1.0
• Node Process (node -p process.versions): http_parser: '2.8.0', node: '10.1.0', v8: '6.6.346.27-node.6', uv: '1.20.2', zlib: '1.2.11', ares: '1.14.0', modules: '64', nghttp2: '1.29.0', napi: '3', openssl: '1.1.0h', icu: '61.1', unicode: '10.0', cldr: '33.0', tz: '2018c'
• Node Platform (node -p process.platform): darwin
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"): 4.9.0
• npm node-sass versions (npm ls node-sass): 4.9.0

Hi,

I'm using a variable to define a color in RGB values.
Then I use this variable $color to setup the stroke of an svg.

$color: rgb(0, 129, 198);

@mixin divider($stroke: $color) {
  background: transparent url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax meet" viewBox="0 0 20 4" stroke="#{$stroke}" stroke-width="1"><path fill="none" d="M0, 3.5 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3"/></svg>');
}

The fact that the variable $color is in RGB format is important because of a chrome deprecation:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M67, around May 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

The problem is that SASS always output the color in hex value even if I've choose initially a RGB or HSL value.

Thanks for your help!

Cheers

[xzyfer]

Are you using compressed output?

…

On Fri., 25 May 2018, 9:46 am Jim Blue, ***@***.***> wrote: - NPM version (npm -v): 6.0.1 - Node version (node -v): 10.0.1.0 - Node Process (node -p process.versions): http_parser: '2.8.0', node: '10.1.0', v8: '6.6.346.27-node.6', uv: '1.20.2', zlib: '1.2.11', ares: '1.14.0', modules: '64', nghttp2: '1.29.0', napi: '3', openssl: '1.1.0h', icu: '61.1', unicode: '10.0', cldr: '33.0', tz: '2018c' - Node Platform (node -p process.platform): darwin - Node architecture (node -p process.arch): x64 - node-sass version (node -p "require('node-sass').info"): 4.9.0 - npm node-sass versions (npm ls node-sass): 4.9.0 Hi, I'm using a variable to define a color in RGB values. Then I use this variable *$color* to setup the stroke of an svg. $color: rgb(0, 129, 198); @mixin divider($stroke: $color) { background: transparent url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax meet" viewBox="0 0 20 4" stroke="#{$stroke}" stroke-width="1"><path fill="none" d="M0, 3.5 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3"/></svg>'); } The fact that the variable *$color* is in RGB format is important because of a chrome deprecation: *[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M67, around May 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 <https://www.chromestatus.com/features/5656049583390720> for more details.* The problem is that SASS always output the color in hex value even if I've choose initially a RGB or HSL value. Thanks for your help! Cheers — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2395>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWCe6bv3CBPZaFlthtZhVK9PXzBIyks5t17bRgaJpZM4UNhCd> .

[jimblue]

Nope!

You can try yourself on SassMeister, with the following code:

$color: rgb(0, 129, 198);

@mixin divider($stroke: $color) {
  background: transparent url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax meet" viewBox="0 0 20 4" stroke="#{$stroke}" stroke-width="1"><path fill="none" d="M0, 3.5 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3"/></svg>');
}

.divider {
  @include divider;
}

With LibSass 3.5.2 and expended output (not compressed), you will always get HEX color formating even if the original formating is in RGB or HSL.

[nschonni]

Trying on Sassmeister, this seems consistent with Ruby and Dart Sass so changing this would be a language change. Please file an issue on https://github.com/sass/sass

[nschonni]

This might be the tread you're interested in sass/sass#363

[nschonni]

Workaround for your case is to quote the colour value instead of calling the rgb function if you don't need to do any colour math

$color: 'rgb(0, 129, 198)';

@mixin divider($stroke: $color) {
  background: transparent url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax meet" viewBox="0 0 20 4" stroke="#{$stroke}" stroke-width="1"><path fill="none" d="M0, 3.5 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3 c 5, 0, 5, -3, 10, -3 s 5, 3, 10, 3"/></svg>');
}

[jimblue]

Thanks @nschonni to point out this is a SASS language problem, not a node-sass problem!
I've just open an issue on SASS repository.

BTW I need to do colour math with this variable, so your workaround doesn't work here 😢.

Cheers

[xzyfer]

You can try doing the colour math the pass the result into `rgb($mycolor)` before stringifying it

…

On Fri., 25 May 2018, 7:59 pm Jim Blue, ***@***.***> wrote: Closed #2395 <#2395>. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2395 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWFXpRWdqnaZc6d9jGv3Qh0ZFKMXHks5t2EZygaJpZM4UNhCd> .

[jimblue]

Yeahhh finaly found a trick to keep RGB format while keeping color math possible.

Here is a custom function to force SASS to return the color in RGB format.

$color: rgb(0, 129, 198);

@function rgb-format($color) {
    @return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
}

.foo {
  color: rgb-format($color);
}

// OUTPUT:
.foo {
  color: rgb-format(rgb(0, 129, 198));
}

Thanks everyone for you help 🎉