sass:meta module (type-of, inspect) - Mini Project: Build & Apply

Using sass:meta Module Functions type-of and inspect

📖 Scenario: You are creating a Sass stylesheet for a website. You want to check the types of different Sass values and see their details to help debug your styles.

🎯 Goal: Build a Sass file that defines variables of different types, uses type-of() to find their types, and uses inspect() to get readable strings of those values. Then output these results as CSS custom properties.

📋 What You'll Learn

Create Sass variables with different types: string, number, color, list, map

Create a variable called value-type that uses type-of() on a variable

Create a variable called value-inspect that uses inspect() on a variable

Output CSS custom properties showing the type and inspected value

💡 Why This Matters

🌍 Real World

When writing complex Sass stylesheets, knowing the type and structure of variables helps debug and maintain code.

💼 Career

Front-end developers use sass:meta functions to write smarter, more maintainable stylesheets and debug Sass variables effectively.

1

Create Sass variables of different types

Create Sass variables called $my-string with value "Hello", $my-number with value 42, $my-color with value #3498db, $my-list with value (1, 2, 3), and $my-map with value (key: "value").

SASS

# Your code here

Hint

Use $variable-name: value; syntax to create variables.

2

Create variables using type-of() and inspect()

Create a variable called $value-type that uses type-of($my-list) and a variable called $value-inspect that uses inspect($my-map).

SASS

$my-string: "Hello";
$my-number: 42;
$my-color: #3498db;
$my-list: 1, 2, 3;
$my-map: (key: "value");

# Your code here

Hint

Use type-of() and inspect() functions from sass:meta module.

3

Output CSS custom properties with type and inspect values

Create a CSS selector :root and inside it define CSS custom properties --value-type set to #{$value-type} and --value-inspect set to #{$value-inspect}.

SASS

$my-string: "Hello";
$my-number: 42;
$my-color: #3498db;
$my-list: 1, 2, 3;
$my-map: (key: "value");

$value-type: type-of($my-list);
$value-inspect: inspect($my-map);

/* Your code here */

Hint

Use interpolation #{$variable} to insert Sass variables into CSS.

4

Add a comment explaining the output

Add a comment at the top of the file explaining that the CSS custom properties show the type and inspected value of Sass variables for debugging.

SASS

/* Your comment here */
$my-string: "Hello";
$my-number: 42;
$my-color: #3498db;
$my-list: 1, 2, 3;
$my-map: (key: "value");

$value-type: type-of($my-list);
$value-inspect: inspect($my-map);

:root {
  --value-type: #{$value-type};
  --value-inspect: #{$value-inspect};
}

Hint

Use /* comment */ syntax for Sass comments.