sass-site/source/code-snippets/example-mixin-arbitrary-keyword-arguments.liquid

{% codeExample 'mixin-arbitrary-keyword' %}
  @use "sass:meta";

  @mixin syntax-colors($args...) {
    @debug meta.keywords($args);
    // (string: #080, comment: #800, variable: #60b)

    @each $name, $color in meta.keywords($args) {
      pre span.stx-#{$name} {
        color: $color;
      }
    }
  }

  @include syntax-colors(
    $string: #080,
    $comment: #800,
    $variable: #60b,
  )
  ===
  @use "sass:meta"

  @mixin syntax-colors($args...)
    @debug meta.keywords($args)
    // (string: #080, comment: #800, variable: #60b)

    @each $name, $color in meta.keywords($args)
      pre span.stx-#{$name}
        color: $color




  @include syntax-colors($string: #080, $comment: #800, $variable: #60b)
  ===
  pre span.stx-string {
    color: #080;
  }

  pre span.stx-comment {
    color: #800;
  }

  pre span.stx-variable {
    color: #60b;
  }
{% endcodeExample %}