Sass meta.accepts-content() Function

What You’ll Learn

meta.accepts-content() belongs to the built-in sass:meta module. It returns whether a mixin value can accept a @content block. This page covers pairing it with meta.get-mixin and meta.apply, what “possible” means, Dart Sass 1.69+, and five compiled examples.

What Is meta.accepts-content()?

Some mixins are written to receive nested CSS through a @content block:

@mixin card {
  .card {
    @content;
  }
}

@include card {
  padding: 1rem;
}

Other mixins never declare @content. When you work with mixin values (from meta.get-mixin) and include them via meta.apply, you may not know ahead of time whether forwarding a content block is allowed. meta.accepts-content($mixin) answers that with a boolean.

• Returns true if the mixin can accept @content
• Official docs: true even if the mixin does not always use the block
• Returns false for mixins that cannot take content

📝 Syntax

Load the meta module, then call the function:

@use "sass:meta";

meta.accepts-content($mixin)

Parameters

Return value

📦 Loading sass:meta

There is no legacy global accepts-content(). Load the meta module, then call the namespaced function.

// Recommended — namespaced
@use "sass:meta";
$ok: meta.accepts-content(meta.get-mixin("card"));

// Optional — bring members into scope
@use "sass:meta" as *;
$ok: accepts-content(get-mixin("card"));

// Optional — custom namespace
@use "sass:meta" as m;
$ok: m.accepts-content(m.get-mixin("card"));

🔗 Pair with get-mixin and apply

These three helpers work as a set (all Dart Sass 1.69+ for mixin values):

@use "sass:meta";

$m: meta.get-mixin("panel");

@if meta.accepts-content($m) {
  @include meta.apply($m, 8px) {
    padding: 1rem;
  }
} @else {
  @include meta.apply($m, 8px);
}

📋 “Can Accept” vs “Always Uses”

Official wording matters: the function returns true if it is possible for the mixin to accept a content block, even if it does not always do so. Treat true as “safe to pass content,” not “content is required.”

• true — you may forward @content via meta.apply
• false — do not pass a content block; include the mixin without one

🛠 Compatibility

This is about Sass compilers, not browsers. The check runs at compile time.

Examples Gallery

Each example uses @use "sass:meta". Open View Compiled CSS to see what Dart Sass emits (booleans shown via custom properties where helpful).

@use "sass:meta";

@mixin panel {
  .panel {
    @content;
  }
}

$m: meta.get-mixin("panel");

.check {
  --accepts: #{meta.accepts-content($m)};
}

@include meta.apply($m) {
  padding: 1rem;
}

.check {
  --accepts: true;
}

.panel {
  padding: 1rem;
}

@use "sass:meta";

@mixin solid-btn {
  .btn {
    background: #1d4ed8;
    color: #fff;
  }
}

$m: meta.get-mixin("solid-btn");

.check {
  --accepts: #{meta.accepts-content($m)};
}

@include meta.apply($m);

.check {
  --accepts: false;
}

.btn {
  background: #1d4ed8;
  color: #fff;
}

@use "sass:meta";

@mixin box($radius) {
  .box {
    border-radius: $radius;
    @content;
  }
}

$m: meta.get-mixin("box");

@if meta.accepts-content($m) {
  @include meta.apply($m, 8px) {
    padding: 1rem;
    background: #f8fafc;
  }
} @else {
  @include meta.apply($m, 8px);
}

.box {
  border-radius: 8px;
  padding: 1rem;
  background: #f8fafc;
}

@use "sass:meta";

@mixin stack {
  .stack > * + * {
    margin-top: 0.75rem;
  }
}

@mixin frame {
  .frame {
    border: 1px solid #cbd5e1;
    @content;
  }
}

@mixin include-maybe($name) {
  $m: meta.get-mixin($name);
  @if meta.accepts-content($m) {
    @include meta.apply($m) {
      @content;
    }
  } @else {
    @include meta.apply($m);
  }
}

@include include-maybe("stack");

@include include-maybe("frame") {
  padding: 1rem;
}

.stack > * + * {
  margin-top: 0.75rem;
}

.frame {
  border: 1px solid #cbd5e1;
  padding: 1rem;
}

@use "sass:meta";

@mixin with-slot {
  .slot { @content; }
}

@mixin no-slot {
  .plain { color: #334155; }
}

@debug meta.accepts-content(meta.get-mixin("with-slot")); // true
@debug meta.accepts-content(meta.get-mixin("no-slot"));   // false

.flags {
  --with-slot: #{meta.accepts-content(meta.get-mixin("with-slot"))};
  --no-slot: #{meta.accepts-content(meta.get-mixin("no-slot"))};
}

.flags {
  --with-slot: true;
  --no-slot: false;
}

🚀 Real-World Use Cases

• Safe meta.apply wrappers — forward @content only when allowed.
• Plugin / library APIs — accept a mixin name or value from users and adapt.
• Design-system generators — one helper for both slot and non-slot mixins.
• Compile-time validation — fail early or branch when content is required but unsupported.
• Learning mixin values — inspect capabilities alongside get-mixin.

⚠️ Common Pitfalls

• Passing a string — use a mixin value from meta.get-mixin, not "panel" alone.
• Reading true as “required” — true means content is possible, not mandatory.
• Skipping the guard — forwarding content to a non-accepting mixin can error; check first in generic helpers.
• Old Dart Sass — need 1.69+ for mixin values and this function.
• Confusing with functions — this inspects mixins; functions use meta.call, not content blocks.

💡 Best Practices