sass:meta module (type-of, inspect)

Introduction

The sass:meta module helps you check what kind of value you have and see its details. This is useful when you want to understand or debug your styles.

You want to know if a value is a color, number, string, or something else.

You need to print out a value to understand what it contains.

You are writing functions or mixins that behave differently based on the type of input.

You want to debug complex Sass variables by inspecting their content.

Syntax

SASS

@use "sass:meta";

meta.type-of($value)
meta.inspect($value)

type-of() returns the type of the value as a string like "string", "number", "color", etc.

inspect() returns a string showing the value in a readable way, useful for debugging.

Examples

This checks the type of $value, which is a number with units, so $type will be "number".

SASS

@use "sass:meta";

$value: 10px;
$type: meta.type-of($value);

This converts the color $value to a string like "#ff0000" for easy reading.

SASS

@use "sass:meta";

$value: #ff0000;
$info: meta.inspect($value);

Here, $value is a string, so type-of() returns "string".

SASS

@use "sass:meta";

$value: "hello";
$type: meta.type-of($value);

Sample Program

This Sass code uses meta.type-of() to find the type of different values and meta.inspect() to get their readable string forms. The results are set as CSS properties so you can see them in the browser.

SASS

@use "sass:meta";

$color: #3498db;
$size: 2rem;
$text: "Sass Meta";

.type-check {
  color-type: meta.type-of($color);
  size-type: meta.type-of($size);
  text-type: meta.type-of($text);
  color-inspect: meta.inspect($color);
  size-inspect: meta.inspect($size);
  text-inspect: meta.inspect($text);
}

Important Notes

Always @use "sass:meta"; before calling type-of() or inspect().

type-of() helps you write smarter styles by checking value types.

inspect() is great for debugging but usually not used in final CSS.

Summary

sass:meta helps you check and understand Sass values.

type-of() tells you the kind of value you have.

inspect() shows the value as a readable string.