Sass Data Types

What Data Types Does Sass Support?

Sass values fall into seven core types: numbers (with optional units), strings (quoted or unquoted), colors, booleans, null, lists, and maps. Unlike CSS, which treats most values as opaque text, Sass understands these types and lets you inspect, combine, and transform them with real logic.

$count: 3;                 // number
$label: "Save Changes";    // quoted string
$brand: #2563eb;           // color
$enabled: true;            // boolean
$empty: null;               // null
$sizes: 8px, 16px, 24px;    // list
$theme: (primary: $brand);  // map

Each of these values behaves differently in expressions, for example, you can add two numbers but not two colors the same way.

Type Checking Syntax

@use 'sass:meta';
meta.type-of($value)

• meta.type-of() returns a value's type as a string: "number", "string", "color", "bool", "null", "list", or "map".
• Numbers can carry a unit (16px) or be unitless (1.5).
• Lists can be comma-separated or space-separated, and maps always use (key: value, ...) syntax.
• null behaves like a falsy, empty placeholder value, similar to null in many programming languages.

Sass Data Types Cheatsheet

Every core Sass data type with a representative example.

Numbers and Units

Sass numbers can be unitless or carry a CSS unit like px, rem, %, or deg. Arithmetic between numbers with compatible units works as expected, but Sass will raise an error if you try to add incompatible units, like 10px + 2em, without first converting them.

$a: 10px;
$b: 5px;
$sum: $a + $b; // => 15px

$percent: 50%;
$decimal: $percent / 100%; // ratio, unitless in Dart Sass 2+

Quoted vs Unquoted Strings

Both quoted ("Arial") and unquoted (Arial) strings are valid, and Sass treats them as largely interchangeable in most contexts. CSS keyword values like bold, sans-serif, or inherit are typically written unquoted.

$font-label: "Primary Font"; // quoted, useful for display text
$font-family: Arial, sans-serif; // unquoted, standard CSS keyword style

Null and Booleans

null is useful for representing "no value" and is commonly used as a default or a signal to skip outputting a declaration entirely. Booleans (true/false) drive conditional logic in @if statements.

@mixin border($color: null) {
  @if $color {
    border: 1px solid $color;
  }
}

.plain-box {
  @include border; // no border declaration output at all
}

Passing null (the default) means the @if check fails, and no border declaration is generated.

Common Mistakes

• Trying to add numbers with incompatible units, like adding a percentage to a plain pixel value without conversion.
• Assuming quoted and unquoted strings are always visually identical in every context; string interpolation and certain functions can behave slightly differently between them.
• Confusing null with the string "null" or the number 0, they are distinct values with different truthy/falsy behavior.
• Not checking a value's type with meta.type-of() before performing an operation on it inside a generic, reusable function.

Key Takeaways

• Sass has seven core data types: numbers, strings, colors, booleans, null, lists, and maps.
• Numbers can carry units; arithmetic requires compatible units.
• null represents an absent value and is falsy in conditional checks.
• meta.type-of() lets you inspect a value's type at compile time, useful for validation.