Sass 函数简单示例给出错误

Question

我有以下给出错误的 sass 代码。请帮忙！

ma​​in.scss

@function alpha($background, $color, $font-size){
    return {
    background: $background,
    color: $color,
    font-size: $font-size
    }
}

div {alpha(yellow, violet, 24);}
p {alpha(blue, orange, 20);}

错误：

致命错误：解析错误：第 3 行 background: $background, (stdin) 失败

注意：我知道这可以通过我的 Mixin 完成。但是，我读到的是 Mixins 和 Functions 可以互换使用。所以，我想这样做 仅按功能工作（查看它们是否真的完成了所有工作 混合）。

提前致谢！

Answer 1

你在这里混合mixins和functions。

混合提供（嵌套的）规则和值，而函数只返回值。

你需要的是一个像这里这样的mixin

@mixin alpha($background, $color, $font-size) {
   background: $background;
   color: $color;
   font-size: $font-size;
}

div {@include alpha(yellow, violet, 24);}
p {@include alpha(blue, orange, 20);}

说明

这就是你使用 Mixins 的方式

@mixin red-align($text-align: left) {
   color: red;
   text-align: $text-align
}


body h1 {
  @include red-align(center);
}

这就是你使用函数的方式

@function red($opacity: 1) {
   @return rgba(255, 0, 0, $opacity);
}
@function align($text-align: left) {
   @return $text-align;
}

body h1 {
  color: red();
  text-align: align(center);
}

两个例子都产生了：

body h1 {
  color: red;
  text-align: center;
}