css - Sass 将映射传递给函数不是有效的 CSS 值

标签 css sass

我有一个接受 sass map 作为参数的函数。问题是当我给它一个自定义 map 它抛出:

(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));
}

我希望进入 if block 并返回 'map' 字符串。我错过了什么?

最佳答案

你的 map 没有问题,但是你对 $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));
}

请阅读此site point article about SASS @function arguments .

关于css - Sass 将映射传递给函数不是有效的 CSS 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48439578/

相关文章:

javascript - Owl Carousel 幻灯片全部显示为一张幻灯片

vue.js - Electron Webpack Vue全局变量

css - Hover.css 边框底部效果在 Opera 中无法正常工作

CSS 2 萨斯 : How do I change the output format of the generated SCSS?

angular - 使用 SystemJS 即时转译 SASS

html - Bootstrap "close"类 : Button Sometimes Pushed out of Alert by Text

jquery 错误在到达点后拍摄到顶部并复制图像

html - mozilla 和 chrome 中的组合框

twitter-bootstrap - 如何在 Sass 而不是 Less 中使用 Bootstrap Mixins?

html - 分隔线的高度小于可点击元素