Sass meta.calc-name() Function

What You’ll Learn

meta.calc-name() belongs to the built-in sass:meta module. It returns the quoted name of a CSS calculation value—for example "calc" or "clamp". This page covers branching on kind, pairing with meta.calc-args, Dart Sass 1.40+, and five compiled examples.

What Is meta.calc-name()?

Sass stores values like calc(100% - 2rem) and clamp(1rem, 2vw, 3rem) as a special calculation type. Sometimes you need to know which calculation it is before you inspect arguments or rebuild CSS. Official docs: meta.calc-name($calc) returns the name of the given calculation.

• Result is a quoted string (for example "calc")
• Works with common CSS calc functions Sass understands (calc, clamp, min, max, …)
• Ideal for @if branches in design-token helpers

📝 Syntax

Load the meta module, then call the function:

@use "sass:meta";

meta.calc-name($calc)

Parameters

Return value

📦 Loading sass:meta

// Recommended — namespaced
@use "sass:meta";
$name: meta.calc-name(clamp(1rem, 2vw, 3rem)); // "clamp"

// Optional — bring members into scope
@use "sass:meta" as *;
$name: calc-name(clamp(1rem, 2vw, 3rem));

// Optional — custom namespace
@use "sass:meta" as m;
$name: m.calc-name(clamp(1rem, 2vw, 3rem));

🔢 Official Samples

From the Sass docs, the return values are quoted strings:

@use "sass:meta";

@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

📋 meta.calc-name vs meta.calc-args

🛠 Compatibility

This is about Sass compilers, not browsers. The name is resolved at compile time; browsers only see CSS you emit.

Examples Gallery

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

@use "sass:meta";

@debug meta.calc-name(calc(100px + 10%)); // "calc"

.demo {
  --name: #{meta.calc-name(calc(100px + 10%))};
}

.demo {
  --name: calc;
}

@use "sass:meta";

@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

.demo {
  --name: #{meta.calc-name(clamp(50px, var(--width), 1000px))};
}

.demo {
  --name: clamp;
}

@use "sass:meta";

@function describe-size($size) {
  @if meta.calc-name($size) == "clamp" {
    @return "fluid";
  } @else if meta.calc-name($size) == "calc" {
    @return "computed";
  } @else {
    @return "other";
  }
}

$a: clamp(1rem, 2vw, 2rem);
$b: calc(100% - 2rem);

.box {
  --a: #{describe-size($a)};
  --b: #{describe-size($b)};
  font-size: $a;
  width: $b;
}

.box {
  --a: fluid;
  --b: computed;
  font-size: clamp(1rem, 2vw, 2rem);
  width: calc(100% - 2rem);
}

@use "sass:meta";

$fluid: clamp(1rem, 2vw + 0.5rem, 2rem);

.token {
  --kind: #{meta.calc-name($fluid)};
  --args: #{meta.inspect(meta.calc-args($fluid))};
  font-size: $fluid;
}

.token {
  --kind: clamp;
  --args: 1rem, 2vw + 0.5rem, 2rem;
  font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
}

@use "sass:meta";

$cap: min(90vw, 40rem);
$floor: max(12px, 0.8rem);

.layout {
  --cap-kind: #{meta.calc-name($cap)};
  --floor-kind: #{meta.calc-name($floor)};
  max-width: $cap;
  font-size: $floor;
}

.layout {
  --cap-kind: min;
  --floor-kind: max;
  max-width: min(90vw, 40rem);
  font-size: max(12px, 0.8rem);
}

🚀 Real-World Use Cases

• Token classifiers — mark sizes as fluid (clamp) vs computed (calc).
• Validation — require clamp tokens before generating fluid-type utilities.
• Docs / debug CSS — emit --kind next to the live calculation.
• Nested calc walks — after calc-args finds a nested calc, read its name too.
• Theme tooling — route different calculation kinds through different mixins.

⚠️ Common Pitfalls

• Passing a plain number — 10px is not a calculation; wrap or build calc/clamp/min/max first.
• Comparing without quotes — prefer == "clamp" against the quoted return value.
• Expecting CSS function text — you get the name only, not the full clamp(...) source.
• Old Dart Sass — need 1.40+ for calculation introspection.
• Skipping calc-args — name alone cannot recover argument values; call both when needed.

💡 Best Practices