Sass 函数简单示例给出错误

Question

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

main.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,（标准输入）失败

Note: I know this can be done my Mixin. But, what I read is that Mixins & Functions can be used inter-changably. So, I want to do this work by Functions only (to see if they are really do all work of mixins).

提前致谢！

Answer 1

您正在此处混合 mixins and function。

Mixins 提供（嵌套的）规则和值，而功能仅 return 个值。

你需要的是像这里这样的 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;
}

Sass 函数简单示例给出错误

Sass function simple example is giving error

css

sass

scss-mixins

说明

这就是你使用 Mixins 的方式

这就是您使用函数的方式