Sass pass map to a function isn't a valid CSS value

Question

I have a function that accepts sass map as a parameter. The problem is that when I give it a custom map it throws:

(color: red) isn't a valid CSS value.

@function is-map($var){
  @return type-of($var) == 'map';
}

@function someFunc($props...) {
  @if(is-map($props)) {
    @return 'map';
  } @else {
    @return $props;
  }
}

h2 {
  color: someFunc((color: red));
}

I am expecting to get inside the if block and to return the 'map' string. What am I missing?

Answer 1

There is nothing wrong with your map, but with your usage of the $props...:

@function is-map($var){
  @return type-of($var) == 'map';
}

@function someFunc($props...) {
  @if(is-map($props...)) { /*  only difference is the three dots you don't use */
    @return 'map';
  } @else {
    @return $props;
  }
}

h2 {
  color: someFunc((color: red));
}

Please read this site point article about SASS @function arguments.