Color maps break with different names

[saivan]

So I'm using a map with two different names, and my choice of name is causing the compiler to fail somehow.

input.scss

$colors: (
  blue-1: #f34f32,
  yellow-1: #f34f32,
);

@function color($color, $i, $alpha:1) {
  $chosen-color: map-get($colors, #{$color}-#{$i});
  $with-alpha: rgba($chosen-color, $alpha);
  @return $with-alpha;
}

// Uncomment this to unbreak it :D
body {
    background-color: color(blue, 1);
}

// Uncomment this to break it
// body {
//     background-color: color(yellow, 1);
// }

Actual results

So when I uncomment the "break it section" and compile it with libsass v3.5.5, I get:

argument $color of rgba($color, $alpha) must be a color

But when it's commented I get

body{background-color:#f34f32}

I can only pin it down to the variable name 🤷‍♂️

version info:

$ node-sass --version
libsass         3.5.5   (Sass Compiler) [C/C++]

[xzyfer]

Try quoting the colour names when calling your function like color("blue", 1).

…

On Thu, 22 Oct 2020, 3:37 pm theChosenOne, ***@***.***> wrote: So I'm using a map with two different names, and my choice of name is causing the compiler to fail somehow. input.scss $colors: ( blue-1: #f34f32, yellow-1: #f34f32, ); @function color($color, $i, $alpha:1) { $chosen-color: map-get($colors, #{$color}-#{$i}); $with-alpha: rgba($chosen-color, $alpha); @return $with-alpha; } // Uncomment this to unbreak it :D body { background-color: color(blue, 1); } // Uncomment this to break it // body { // background-color: color(yellow, 1); // } Actual results So when I uncomment the "break it section" and compile it with libsass v3.5.5, I get: argument $color of rgba($color, $alpha) must be a color But when it's commented I get body{background-color:#f34f32} I can only pin it down to the variable name 🤷‍♂️ version info: $ node-sass --version libsass 3.5.5 (Sass Compiler) [C/C++] — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3132>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAENSWELBO4CQGJXLLR25MLSL6ZHPANCNFSM4S2U2FJQ> .

[saivan]

I can do that, but it's honestly a little ugly :P Would you not expect it to work without the quotes?

edit: Just for the record, quotes do fix it :)
edit: Also, I forgot to mention that this only happens with the compressed setting

[saivan]

I mentioned this in an edit, but this only happens with the compressed setting

[xzyfer]

Would you not expect it to work without the quotes?

No. This doesn't work because Sass has types. blue is of type Color, where "blue" is of type String. Doing #{$color}-#{$i} does not produce the String "blue-1" as you might expect.

You can play around with the inspect and @debug functions to find alternative ways to produce a string that matches the match look up you want.

The reason this breaks in compressed mode is that the output of Color types changes in compressed mode. The compiler produces the shortest representation of the colour i.e. "red" vs #f00, or "green" vs #0f0.

[saivan]

I see, is there some way to coerce the color function to use a string?

[mgreter]

IMO the following should have worked, but seems to fail anyway, therefore reopening:

$colors: (
  #{blue}-#{1}: #111,
  #{yellow}-#{1}: #333,
);

@function color($color, $i, $alpha:1) {
  $key: #{$color}-#{$i};
  $chosen-color: map-get($colors, $key);
  $with-alpha: rgba($chosen-color, $alpha);
  @return $with-alpha;
}

// Uncomment this to unbreak it :D
body {
    background-color1: color(blue, 1);
}

// Uncomment this to break it
body {
    background-color2: color(yellow, 1);
}

Alternatively you probably/might want to use a list with a real color as key:

$colors: (
  blue: (#111),
  yellow: (#333),
);

@function color($color, $i, $alpha:1) {
  $color-list: map-get($colors, $color);
  $chosen-color: nth($color-list, $i);
  $with-alpha: rgba($chosen-color, $alpha);
  @return $with-alpha;
}

// Uncomment this to unbreak it :D
body {
    background-color1: color(blue, 1);
}

// Uncomment this to break it
body {
    background-color2: color(yellow, 1);
}