meta.calc-name($calc) returns the quoted string name of a CSS calculation value—for example "calc" or "clamp". Load it with @use "sass:meta" on Dart Sass 1.40+.
meta.calc-name(calc(100px + 10%)) → "calc" · meta.calc-name(clamp(50px, var(--width), 1000px)) → "clamp".
Compare with quoted strings: meta.calc-name($value) == "clamp". Pair with meta.calc-args when you also need the argument list.
10px is a number, not a calculation. Pass a calc / clamp / min / max value.
@use "sass:meta";
meta.calc-name($calc); //=> quoted string
meta.calc-name(calc(100px + 10%)); // "calc"
meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"
meta.calc-name(min(100px, 10%)); // "min"
meta.calc-name(max(1rem, 2vw)); // "max"
// Module API — prefer meta.calc-name after @use "sass:meta"Pattern: capture a calculation → read the name → branch or log → use meta.calc-args for the contents.
Common names and how they differ from args:
| Input | calc-name | Usually pair with |
|---|---|---|
calc(...) | "calc" | One expression arg via calc-args |
clamp(...) | "clamp" | Three args (min / preferred / max) |
min(...) | "min" | Two or more comparable values |
max(...) | "max" | Two or more comparable values |
Official return is a quoted string, so == "clamp" works cleanly. Interpolation into custom properties may drop the quotes in CSS output.
Examples target Dart Sass 1.40+ with @use "sass:meta". Open View Compiled CSS for verified output (official samples use @debug; demos also emit via content to keep quotes visible).
calc)Name of a calc() value is "calc".
@use "sass:meta";
@debug meta.calc-name(calc(100px + 10%)); // "calc"
.basic {
content: meta.calc-name(calc(100px + 10%));
}"calc".content keeps the quotes in CSS.clamp)Name of a clamp() value is "clamp".
@use "sass:meta";
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"
.clamp-demo {
content: meta.calc-name(clamp(50px, var(--width), 1000px));
}"clamp".calc-args for those.min() and max()Same helper names other CSS calculation functions.
@use "sass:meta";
.min-demo {
content: meta.calc-name(min(100px, 10%));
}
.max-demo {
content: meta.calc-name(max(1rem, 2vw));
}min(...) → "min".max(...) → "max".Compare the quoted name in @if.
@use "sass:meta";
@use "sass:list";
$value: clamp(50px, var(--width), 1000px);
.branch {
@if meta.calc-name($value) == "clamp" {
--kind: clamp;
--count: #{list.length(meta.calc-args($value))};
}
}"clamp".@if.meta.calc-argsDescribe both the function name and how many args it carries.
@use "sass:meta";
@use "sass:list";
$value: clamp(50px, var(--width), 1000px);
.pair {
content: meta.calc-name($value);
--count: #{list.length(meta.calc-args($value))};
}calc-name answers which function.calc-args answers what was passed.Most calc-name bugs are passing plain numbers or forgetting quotes in compares.
Plain 10px is not valid. Pass calc, clamp, min, or max.
Write == "clamp", not an unquoted identifier, when branching on the name.
Use meta.calc-args when you need the values inside.
--n: #{meta.calc-name(...)} often emits clamp without quotes. Use content or keep the Sass string for logic.
Prefer the module form with Dart Sass 1.40+.
| API | Status |
|---|---|
meta.calc-name() | Dart Sass 1.40+ via @use "sass:meta" |
| Input | Calculation value (calc / clamp / min / max) |
| Return type | Quoted string |
| LibSass / Ruby Sass | Not available |
Compile with the Dart Sass CLI.
"calc" or "clamp".== "clamp" at compile time.@use "sass:meta".One line: when you need the function name of a CSS calculation at compile time, call meta.calc-name($calc).
Practical checklist:
1. @use "sass:meta"
2. Pass a calc / clamp / min / max value
3. Expect a quoted string name
4. Compare with == "clamp" (quoted)
5. Use meta.calc-args for the contentsInvoke a function value dynamically with arguments.
8 people found this page helpful