Sass meta.apply() Function

What You’ll Learn

meta.apply() belongs to the built-in sass:meta module. It includes a mixin value with arguments you supply—like calling a mixin when you only have a reference to it. This page covers meta.get-mixin, @content forwarding, vs meta.call, Dart Sass 1.69+, and five compiled examples.

What Is meta.apply()?

Normally you write @include font-class(12px) with the mixin name fixed in the stylesheet. Sometimes you want to choose which mixin to run—pass it into another mixin, store it, or pick it from a map. Sass represents that choice as a mixin value. meta.apply includes that value with arguments.

• You use it with @include (it is a meta mixin, not a returning function)
• $mixin must be a mixin value—usually from meta.get-mixin("name")
• Extra arguments after the mixin are forwarded as the mixin’s parameters
• An optional @content block is forwarded into the applied mixin

📝 Syntax

Load the meta module, then include the mixin:

@use "sass:meta";

@include meta.apply($mixin, $args...);

// With a content block (forwarded to $mixin)
@include meta.apply($mixin, $args...) {
  // @content for the applied mixin
}

Parameters

Return value

📦 Loading sass:meta

There is no legacy global apply(). Load the meta module and include meta.apply.

// Recommended — namespaced
@use "sass:meta";
@include meta.apply(meta.get-mixin("font-class"), 12px);

// Optional — bring members into scope
@use "sass:meta" as *;
@include apply(get-mixin("font-class"), 12px);

// Optional — custom namespace
@use "sass:meta" as m;
@include m.apply(m.get-mixin("font-class"), 12px);

🔗 Pair with meta.get-mixin

meta.apply does not accept a string mixin name by itself. First resolve the mixin value:

@use "sass:meta";

@mixin alert($msg) {
  .alert { content: "#{$msg}"; }
}

// Resolve → include
$m: meta.get-mixin("alert");
@include meta.apply($m, "Saved");

// Or inline
@include meta.apply(meta.get-mixin("alert"), "Saved");

• meta.get-mixin($name) — mixin in the current module
• meta.get-mixin($name, $module) — mixin from a @use namespace
• By default, a missing name is an error

📋 meta.apply vs meta.call

🛠 Compatibility

This is about Sass compilers, not browsers. The mixin runs at compile time; browsers only see the CSS it produces.

Prefer current Dart Sass. Built-in modules need Dart Sass 1.23+; meta.apply specifically needs 1.69+.

Examples Gallery

Each example uses @use "sass:meta". Open View Compiled CSS for verified Dart Sass output (official samples where noted).

@use "sass:meta";

@mixin badge($label) {
  .badge {
    content: "#{$label}";
  }
}

$badge-mixin: meta.get-mixin("badge");
@include meta.apply($badge-mixin, "New");

.badge {
  content: "New";
}

@use "sass:meta";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: 8px, 12px, 2rem;

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}

@use "sass:meta";

@mixin shadow-box($x, $y, $blur) {
  .card {
    box-shadow: $x $y $blur rgba(0, 0, 0, 0.2);
  }
}

@include meta.apply(meta.get-mixin("shadow-box"), 0, 4px, 12px);

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@use "sass:meta";

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

@include meta.apply(meta.get-mixin("panel"), 8px) {
  padding: 1rem;
  background: #f8fafc;
}

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

@use "sass:meta";

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

@mixin outline-btn {
  .btn { background: transparent; border: 2px solid #1d4ed8; }
}

$variant: "outline";
$mixin: if(
  $variant == "outline",
  meta.get-mixin("outline-btn"),
  meta.get-mixin("solid-btn")
);

@include meta.apply($mixin);

.btn {
  background: transparent;
  border: 2px solid #1d4ed8;
}

🚀 Real-World Use Cases

• Higher-order mixins — helpers like apply-to-all that accept any mixin value.
• Design-token generators — loop sizes, colors, or breakpoints into one mixin.
• Variant switching — choose solid vs outline (or theme A vs B) without duplicated includes.
• Library APIs — let consumers pass a mixin value into your abstraction.
• Content wrappers — forward @content into a dynamically chosen shell mixin.

⚠️ Common Pitfalls

• Passing a string — meta.apply("font-class", 12px) is wrong. Resolve with meta.get-mixin first.
• Using it as a value — do not write $x: meta.apply(...); always @include.
• Confusing with meta.call — functions return values; mixins emit CSS.
• Old Dart Sass — need 1.69+ for mixin values and meta.apply.
• Wrong arity — argument count must match the applied mixin’s parameters (same rules as a normal include).

💡 Best Practices