Comma inside SCSS map value (box-shadow)

Question

So I want to declare multiple box shadow values on an element, which is valid CSS if written with a comma in-between the values like this:

.icon {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

However, I have a SCSS map that I'm using to centralize all of my box-shadow values that I use throughout my project. The problem is that the comma that separates the box-shadow values in a normal CSS style is breaking my code because SCSS sees a comma and assumes that I'm separating a value in the map, not within the value itself.

this is what I want to do, but it doesn't work:

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

My current best idea is to put the icon's box-shadow value in a variable and then pass it into the map, but I don't like that because the point of using a map in the first place is to avoid having loose variables all over the place.

this solves the problem, but I don't like it:

$icon-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: $icon-box-shadow
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

Is there a better way?

Answer 1

It appears you can wrap the values in parentheses:

$box-shadow: (
   panel: 0 0 5px 0px rgba(147, 147, 147, 0.25),
   dropdown: 0 6px 12px rgba(0,0,0,.175),
   icon: (0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))
);

.icon {
  box-shadow: map-get($box-shadow, icon);
}

https://jsfiddle.net/jmarikle/5pexqhwb/