Sass meta.type-of() Function

What You’ll Learn

meta.type-of() belongs to the built-in sass:meta module. It returns an unquoted string naming the type of any Sass value. This page covers common return values, safe @if branching, the empty () gotcha, and five compiled examples.

What Is meta.type-of()?

Official docs: returns the type of $value as an unquoted string. Use it when a mixin or function accepts mixed inputs and needs different behavior for numbers, lists, maps, colors, and more.

• Works on any Sass value at compile time.
• Compare results to unquoted names like number or list.
• New type names may be added in future Sass versions.
• Empty () may be a list or a map depending on origin.

📝 Syntax

@use "sass:meta";

// Recommended
meta.type-of($value)

// Legacy global name
type-of($value)

Parameters

Return value

📋 Possible Return Values

Official docs list these common results (new names may appear later):

📦 Loading sass:meta

// Recommended — namespaced
@use "sass:meta";
$t: meta.type-of(10px); // number

// Optional — bring members into scope
@use "sass:meta" as *;
$t: type-of(10px);

// Legacy global
$t: type-of(10px);

⚖️ Comparing Types Safely

Because the result is an unquoted string, compare it to unquoted identifiers:

@use "sass:meta";

@if meta.type-of($value) == number {
  // OK — both sides unquoted
}

// Avoid this unless you intentionally want a quoted string:
// @if meta.type-of($value) == "number" { ... }

Official note: empty () may return list or map depending on whether a map function produced it.

🛠 Compatibility

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

Prefer current Dart Sass for types like calculation and mixin.

Examples Gallery

Each example uses meta.type-of at compile time. Open View Compiled CSS for verified Dart Sass output.

@use "sass:meta";

.probe {
  --number: #{meta.type-of(10px)};
  --list: #{meta.type-of(10px 20px 30px)};
  --empty: #{meta.type-of(())};
}

.probe {
  --number: number;
  --list: list;
  --empty: list;
}

@use "sass:meta";
@use "sass:map";

$m: ("a": 1);

.probe {
  --string: #{meta.type-of("hello")};
  --color: #{meta.type-of(#c69)};
  --bool: #{meta.type-of(true)};
  --null: #{meta.type-of(null)};
  --map: #{meta.type-of($m)};
  --calc: #{meta.type-of(calc(1px + 100%))};
}

.probe {
  --string: string;
  --color: color;
  --bool: bool;
  --null: null;
  --map: map;
  --calc: calculation;
}

@use "sass:meta";

@function scale-if-number($v) {
  @if meta.type-of($v) == number {
    @return $v * 2;
  }
  @return $v;
}

.box {
  width: scale-if-number(24px);
  content: scale-if-number("ok");
}

.box {
  width: 48px;
  content: "ok";
}

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

@function describe($v) {
  $t: meta.type-of($v);
  @if $t == list {
    @return list.length($v);
  }
  @if $t == map {
    @return list.length(map.keys($v));
  }
  @return $t;
}

.probe {
  --list-len: #{describe(a b c)};
  --map-len: #{describe(("x": 1, "y": 2))};
  --other: #{describe(true)};
}

.probe {
  --list-len: 3;
  --map-len: 2;
  --other: bool;
}

@use "sass:meta";
@use "sass:math";

@function safe-div($a, $b) {
  @if meta.type-of($a) != number or meta.type-of($b) != number {
    @error "safe-div expects numbers";
  }
  @return math.div($a, $b);
}

.box {
  width: safe-div(100px, 4);
}

.box {
  width: 25px;
}

🚀 Real-World Use Cases

• Flexible APIs — accept a number or a list and branch accordingly.
• Token validation — ensure theme values are colors before mixing.
• Safer math — guard math.div / math.pow inputs.
• Debugging — print types next to meta.inspect while learning.
• Calc awareness — detect unresolved calculation values.

⚠️ Common Pitfalls

• Quoted comparisons — prefer == number, not == "number".
• Empty () — may be list or map; do not assume one forever.
• Calc simplification — some calc() expressions become number.
• Expecting JS types — Sass has its own type names (for example bool, not boolean).
• Runtime checks — everything resolves when Sass compiles.

💡 Best Practices