Sass - Ordinal arguments must precede named arguments (mixin)-CodePudding

I have implemented the following mixin:

@mixin fancy-container(
  $background-color: transparent,
  $background-image: null,
  $background-position: center,
  $background-repeat: no-repeat,
  $background-size: cover,
  $height: 50vh,
  $min-height: 250px,
  $parallax: false,
  $position: relative,
  $overflow: hidden,
  $box-shadow: none
) {
  background-color: $background-color;
  background-image: $background-image;
  background-position: $background-position;
  background-repeat: $background-repeat;
  background-size: $background-size;
  height: $height;
  min-height: $min-height;
  position: $position;
  overflow: $overflow;
  box-shadow: $box-shadow;

  @if $parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

And my idea is to reuse it in order to create the following css effect:

body {
  background-image: radial-gradient(#212121 20%, transparent 20%),
      radial-gradient(#fafafa 20%, transparent 20%);
  background-color: #e53935;
  background-position: 0 0, 50px 50px;
  background-size: 100px 100px;
}

<body></body>

This code

  @include fancy-container(
    $background-image: radial-gradient(#212121 20%, transparent 20%),
    radial-gradient(
      #fafafa 20%,
      transparent 20%,
    ),
    $background-color: $primary,
    $background-position: 0 0,
    50px 50px,
    $background-size: 100px 100px
  );

doesn't work. And I get the error Ordinal arguments must precede named arguments. Any ideas?

CodePudding user response：

Sass thinks that each comma precedes a new parameter in the include. Use #{...} to wrap values that include commas, like this:

@include fancy-container(
    $background-image: #{
        radial-gradient(#212121 20%, transparent 20%),
        radial-gradient(#fafafa 20%, transparent 20%)},
    $background-color: $primary,
    $background-position: #{0 0, 50px 50px},
    $background-size: 100px 100px
);