Sass meta.calc-args()

Intermediate
8 min read
Updated: Nov 2026
5 examples
Dart Sass 1.40+
Sass meta.calc-args inspecting arguments of CSS calculations
Definition

Definition and Usage

meta.calc-args($calc) returns a list of arguments from a CSS calculation value such as calc(), clamp(), min(), or max(). Load it with @use "sass:meta" on Dart Sass 1.40+.

Official samples.

meta.calc-args(calc(100px + 10%)) → unquote("100px + 10%") · meta.calc-args(clamp(50px, var(--width), 1000px)) → 50px, unquote("var(--width)"), 1000px.

Typed arguments.

Official docs: numbers and nested calculations keep their types; everything else becomes an unquoted string.

Not for plain lengths.

10px is a number, not a calculation. Pass a calc / clamp / min / max value.

Syntax

Syntax

SCSS
@use "sass:meta";

meta.calc-args($calc); //=> list

meta.calc-args(calc(100px + 10%));
// unquote("100px + 10%")

meta.calc-args(clamp(50px, var(--width), 1000px));
// 50px, unquote("var(--width)"), 1000px

// Module API — prefer meta.calc-args after @use "sass:meta"

Pattern: capture a calculation → read args with calc-args → pair with meta.calc-name and meta.type-of while debugging.

Reference

Argument Types

What each list item can be:

Argument shapeReturned asExample
Plain numbernumber50px in a clamp list
Nested calculationcalculation valueWhen Sass keeps the nested calc intact
Mixed expressionunquoted string100px + 10%
CSS function / varunquoted stringvar(--width)
vs calc-name.

calc-name answers “which function?” ("calc", "clamp"). calc-args answers “what was passed inside?”

Code

SCSS Examples

Examples target Dart Sass 1.40+ with @use "sass:meta". Open View Compiled CSS for verified output. Lists are shown via meta.inspect / item types so CSS stays readable.

Example 1 — Official Docs Sample (calc)

One mixed-unit expression becomes a single string argument.

SCSS
@use "sass:meta";
@use "sass:list";

$args: meta.calc-args(calc(100px + 10%));

@debug $args; // unquote("100px + 10%")

.basic {
  --len: #{list.length($args)};
  --arg: #{meta.inspect(list.nth($args, 1))};
  --type: #{meta.type-of(list.nth($args, 1))};
}

How It Works

  1. calc(100px + 10%) has one expression argument.
  2. List length is 1.
  3. Item type is an unquoted string.
  4. Matches the official Sass docs sample.

Example 2 — Official Docs Sample (clamp)

Separate clamp arguments keep their types when possible.

SCSS
@use "sass:meta";
@use "sass:list";

$args: meta.calc-args(clamp(50px, var(--width), 1000px));

@debug $args; // 50px, unquote("var(--width)"), 1000px

.clamp-demo {
  content: meta.inspect($args);
  --len: #{list.length($args)};
}

How It Works

  1. Three arguments in the clamp call.
  2. Ends stay as numbers (50px, 1000px).
  3. Middle becomes the string var(--width).
  4. Matches the official Sass docs sample.

Example 3 — Inspect Each Item’s Type

Use list.nth + meta.type-of on clamp args.

SCSS
@use "sass:meta";
@use "sass:list";

$args: meta.calc-args(clamp(50px, var(--width), 1000px));

.types {
  --1: #{meta.type-of(list.nth($args, 1))};
  --2: #{meta.type-of(list.nth($args, 2))};
  --3: #{meta.type-of(list.nth($args, 3))};
}

How It Works

  1. Index 1 is a number.
  2. Index 2 is a string (var(...)).
  3. Index 3 is a number.
  4. Branch on type before doing Sass math on an item.

Example 4 — min() and max()

Same helper works for other CSS calculation functions.

SCSS
@use "sass:meta";

.min-demo {
  content: meta.inspect(meta.calc-args(min(100px, 10%)));
}

.max-demo {
  content: meta.inspect(meta.calc-args(max(1rem, 2vw)));
}

How It Works

  1. min yields two numeric args.
  2. max likewise returns a two-item list.
  3. Compatible units stay as numbers.
  4. Same API as clamp and calc.

Example 5 — Pair with meta.calc-name

Read the function name and its arguments together.

SCSS
@use "sass:meta";
@use "sass:list";

$value: clamp(50px, var(--width), 1000px);

.pair {
  --name: #{meta.calc-name($value)};
  --count: #{list.length(meta.calc-args($value))};
}

How It Works

  1. calc-name returns "clamp" (shown unquoted after interpolation).
  2. calc-args supplies the three items.
  3. Together they describe the calculation value.
  4. Useful in debug mixins and validation helpers.

Edge Cases & Pitfalls

Most calc-args bugs are expecting split numbers from mixed expressions, or passing plain lengths.

string

Mixed math stays one string

calc(100px + 10%) does not become two numbers. Treat it as a single unquoted string item.

input

Needs a calculation value

Plain 10px is not valid input. Pass calc, clamp, min, or max.

types

Check types before math

Use meta.type-of before multiplying an arg—strings will not do Sass arithmetic.

simplify

Sass may simplify first

Compatible nested math can collapse before you inspect args. Inspect the value you actually receive.

Toolchain

Sass Support

Prefer the module form with Dart Sass 1.40+.

APIStatus
meta.calc-args()Dart Sass 1.40+ via @use "sass:meta"
InputCalculation value (calc / clamp / min / max)
Return typeList (numbers, nested calcs, or unquoted strings)
LibSass / Ruby SassNot available

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Returns a list of calculation arguments.
  • Numbers stay numbers; expressions / vars become strings.
  • Pair with calc-name to describe the whole value.
  • Dart Sass 1.40+ via @use "sass:meta".

One line: when you need the argument list inside a CSS calculation at compile time, call meta.calc-args($calc).

Practice

Compile Notes

Practical checklist:

checklist.txt
1. @use "sass:meta"
2. Pass a calc / clamp / min / max value
3. Expect a list (use list.nth / list.length)
4. Check meta.type-of before doing math on an item
5. Pair with meta.calc-name for the function name

Frequently Asked Questions

meta.calc-args($calc) returns a list of the arguments inside a CSS calculation value such as calc(), clamp(), min(), or max(). Use it to inspect or transform those arguments at compile time.
Official docs: if an argument is a number or a nested calculation, it is returned as that type. Otherwise it is returned as an unquoted string—for example var(--width) or an expression like 100px + 10%.
That calc() call has a single expression argument. Sass cannot split mixed-unit math into separate number args, so the whole expression becomes one unquoted string.
meta.calc-name($calc) returns the calculation’s name as a quoted string (calc, clamp, min, …). meta.calc-args returns the argument list inside that calculation.
No. Pass a calculation value. Plain lengths like 10px are numbers, not calculations—wrap or build a calc()/clamp()/min()/max() first.
Dart Sass 1.40+. LibSass and Ruby Sass do not provide this helper. Prefer current Dart Sass.

Next: Sass meta.calc-name()

Read whether a calculation is calc, clamp, min, or max.

meta.calc-name() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass meta.apply Function Sass meta.calc-name Function