meta.type-of($value) returns an unquoted string naming the Sass type of $value—for example number, string, list, or map. Load with @use "sass:meta".
meta.type-of(10px) → number · meta.type-of(10px 20px 30px) → list · meta.type-of(()) → list.
Write @if meta.type-of($v) == number. A quoted "number" is a different string value.
Official docs: more return values may be added later. Fail safely for unknown types.
@use "sass:meta";
meta.type-of($value); //=> unquoted string
meta.type-of(10px); // number
meta.type-of(10px 20px 30px); // list
meta.type-of(()); // list
@if meta.type-of($v) == number {
// …
}
// Global alias (legacy): type-of($value)
// Prefer meta.type-of after @use "sass:meta"Pattern: pass any value → get a type name → branch with @if against unquoted names.
Official docs currently list these type names:
| Return | Example value | Notes |
|---|---|---|
number | 10px, 0.5 | Simplified calc() may become this |
string | "hello", serif | Quoted or unquoted |
color | #c69, red | — |
list | 10px 20px, bare () | Empty () is usually list |
map | ("a": 1) | Map-made empty may also be map |
calculation | calc(1px + 100%) | Unresolved CSS math |
bool / null | true / null | — |
function / mixin / module / arglist | Advanced values | From meta helpers / $args... |
meta.inspect.meta.inspect shows what a value looks like. type-of answers what kind it is.
Examples use @use "sass:meta". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Matches the Sass docs samples for 10px, a space-separated list, and empty ().
@use "sass:meta";
.probe {
--number: #{meta.type-of(10px)};
--list: #{meta.type-of(10px 20px 30px)};
--empty: #{meta.type-of(())};
}number.list.list.Strings, colors, booleans, null, maps, and unresolved calculations.
@use "sass:meta";
$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%))};
}map.calculation.calc(1 + 1)) may become number.numberDouble numbers; leave other values unchanged.
@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");
}number.48px.Return a length for collections; otherwise echo the type name.
@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)};
}meta.type-of($v) once.list.length.Require numbers before calling math.div.
@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);
}25px.@error.Most type-of bugs are quoted comparisons or assuming empty () is always a list.
== number works; == "number" compares a different string.
() can be list or mapOfficial docs: depends on whether a map function produced it.
Unresolved calcs are calculation; fully simplified ones may be number.
Keep an @else / unknown path so new types fail safely.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
meta.type-of() | Dart Sass via @use "sass:meta" |
| Return type | Unquoted string (type name) |
| Compare with | Unquoted names: number, list, … |
| Legacy global | type-of($value) |
Compile with the Dart Sass CLI.
== number, not == "number".One line: to ask what kind of Sass value you have, use meta.type-of($value).
Practical checklist:
1. @use "sass:meta"
2. $t: meta.type-of($value)
3. @if $t == number { … } // unquoted
4. Guard math / color helpers by type
5. Keep an @else for unknown future typesCheck whether a variable exists in the current scope.
8 people found this page helpful