Cannot return all the key names of my SCSS map using function

Question

I have a color map and I need to return only the keys of this map using the function. But I can return only the first key name. I tried to take all name of the keys call section-color, tree-line-color, table-header-color, table-cell-color. But I can't. Please help me.

$base-color: (
        section-color: #506c89,
        tree-line-color: #737373,
        table-header-color: #2a3949,
        table-cell-color: #182028
);

@function color-map($key) {
  @each $key, $value in $base-color {
    @return $key;
  }
}

@debug color-map(tree-line-color);

Hi Navidu, sorry I didn't understand very well your problem. Do you want a function to get all your colors? But if you want all the values, why you put as arg `tree-line-color`? Do you need that key value? What is the output you aspect? — ReSedano, Dec 21 '18 at 21:51
Hi ReSedano, No, I no need a function to get all hex. I need a function to getting color names - section-color, tree-line-color, table-header-color, table-cell-color. I can't get it from this function. — Navidu Kunu, Dec 22 '18 at 05:58
Hi ReSedano, I solved the problem. I return the key value out of @each loop. Thank you very much for your kind support. — Navidu Kunu, Dec 22 '18 at 06:20
you're welcome but... this time I didn't do anything :-) BTW, Well done, Navidu! If you want, you could post your solution to close the question. Cheers :-) — ReSedano, Dec 22 '18 at 08:39
@ReSedano can you check this. I stuck with this: https://stackoverflow.com/questions/53894589/how-to-separate-scss-function-returned-values — Navidu Kunu, Dec 22 '18 at 09:56

score 0 · Answer 1 · answered Dec 22 '18 at 09:51

0

@function color-map($key) {
  @each $key, $value in $base-color {
  }
 @return $key;
}

answered Dec 22 '18 at 09:51

Navidu Kunu

23
4

Jakob E · Answer 2 · 2018-12-22T11:20:09.590

0

SCSS have two build-in functions to return the keys and values of a map (as lists)

map-keys($base-color)   // section-color, tree-line-color, table-header-color, table-cell-color
map-values($base-color) // #506c89, #737373, #2a3949, #182028

edited Dec 22 '18 at 11:20

answered Dec 22 '18 at 11:14

Jakob E

4,476
1
18
21

Thank you for your point @Jokob E. It will help for my future development. – Navidu Kunu Dec 22 '18 at 17:00

Cannot return all the key names of my SCSS map using function

2 Answers2