Data Types
Meet the value types Sass understands beyond plain strings.
Syntax
@use 'sass:meta'; meta.type-of(10px) // numberSass values are typed. Knowing the type helps you pick the right built-in functions.
The types
- Numbers — with or without units:
10,1.5,16px,2em. - Strings — quoted or unquoted:
"hello",bold. - Colors —
#CC6699,rgb(...),hsl(...), or names likered. - Booleans —
trueandfalse. - null — the absence of a value; declarations with a null value are omitted.
- Lists — sequences of values:
10px 20pxora, b, c. - Maps — key/value pairs:
(key: value).
You can inspect a value's type with the meta.type-of() function.
Example
@use 'sass:meta';
@debug meta.type-of(16px); // number
@debug meta.type-of("hello"); // string
@debug meta.type-of(#CC6699); // color
@debug meta.type-of(true); // bool
@debug meta.type-of(1px 2px 3px); // list
@debug meta.type-of((a: 1)); // mapWhen to use it
- A developer checks whether a mixin argument is a number or a string using meta.type-of() before applying arithmetic to prevent compilation errors.
- A team stores theme options as booleans in variables, then uses @if checks to conditionally output dark-mode rules only when the boolean is true.
- A utility mixin handles both unitless and percentage opacity values by detecting the type of the incoming argument at compile time.
More examples
Sass types in one file
Illustrates the six core Sass data types as variable declarations, each with a comment showing its type name.
$count: 3; // number
$label: 'Primary'; // string
$active: true; // boolean
$none-val: null; // null
$palette: red, blue; // list
$token: (size: 16px); // mapChecking type before arithmetic
Uses meta.type-of() to guard a mixin against non-numeric arguments and emit a helpful warning instead of a cryptic error.
@use 'sass:meta';
@mixin font-size($size) {
@if meta.type-of($size) == number {
font-size: $size;
} @else {
@warn 'font-size expects a number, got #{$size}';
}
}Boolean flag for dark theme
A boolean variable acts as a compile-time feature flag, switching the entire color scheme with a single true/false change.
$dark-mode: true;
body {
@if $dark-mode {
background: #121212;
color: #e0e0e0;
} @else {
background: #fff;
color: #222;
}
}
Discussion