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.

Practice

1. What does the Sass function type-of() do?

easy

A. It changes the type of a Sass value.

B. It prints the value to the console.

C. It converts Sass code to CSS.

D. It tells you the kind of value you have in Sass.

Solution

1. Step 1: Understand the purpose of type-of()

   This function returns the type of a given Sass value, like string, number, color, etc.

2. Step 2: Compare options with the function's behavior

   Only It tells you the kind of value you have in Sass. correctly describes that it tells the kind of value you have.

3. Final Answer:

   It tells you the kind of value you have in Sass. -> Option D

4. Quick Check:

   type-of() = tells value type [OK]

Hint: Remember: type-of() reveals the value's kind [OK]

Common Mistakes:

• Thinking type-of() changes the value type
• Confusing type-of() with output functions
• Assuming it converts Sass to CSS

2. Which of the following is the correct syntax to use inspect() on a Sass variable $color?

easy

A. inspect($color)

B. inspect $color;

C. inspect($color);

D. inspect $color()

Solution

1. Step 1: Recall correct function call syntax in Sass

   Functions require parentheses around arguments and no semicolon inside the parentheses.

2. Step 2: Check each option's syntax

   inspect($color) uses inspect($color) which is correct. inspect($color); has an extra semicolon inside parentheses, B misses parentheses, D has incorrect parentheses placement.

3. Final Answer:

   inspect($color) -> Option A

4. Quick Check:

   Function calls need parentheses [OK]

Hint: Use parentheses for Sass function calls [OK]

Common Mistakes:

• Omitting parentheses for function calls
• Adding semicolon inside function parentheses
• Misplacing parentheses after variable

3. Given the Sass code:

$value: 10px;
$result: type-of($value);

What is the value of $result?

medium

A. "string"

B. "number"

C. "length"

D. "px"

Solution

1. Step 1: Identify the type of $value

   The value 10px is a number with a unit in Sass, so its type is "number".

2. Step 2: Understand what type-of() returns

   It returns the type as a string, so $result will be "number".

3. Final Answer:

   "number" -> Option B

4. Quick Check:

   10px is a number type [OK]

Hint: Units don't change type; 10px is still a number [OK]

Common Mistakes:

• Thinking units create a new type like 'length'
• Confusing string with number
• Assuming type-of returns the unit

4. What is wrong with this Sass code?

$val: #ff0000;
$result: inspect $val;

medium

A. Missing parentheses for the inspect function call.

B. The variable $val is not defined.

C. inspect cannot be used with color values.

D. inspect requires a semicolon after the variable.

Solution

1. Step 1: Check function call syntax

   In Sass, functions must be called with parentheses around arguments.

2. Step 2: Identify the error in the code

   The code uses inspect $val; without parentheses, which is invalid syntax.

3. Final Answer:

   Missing parentheses for the inspect function call. -> Option A

4. Quick Check:

   Functions need parentheses [OK]

Hint: Always use parentheses when calling Sass functions [OK]

Common Mistakes:

• Calling functions without parentheses
• Assuming inspect can't handle colors
• Thinking semicolon is needed inside function call

5. You want to create a Sass mixin that prints the type and value of any input variable for debugging. Which code correctly uses type-of() and inspect() together?

hard

A. @mixin debug($var) { content: "Type: $var.type, Value: $var.inspect"; }

B. @mixin debug($var) { content: "Type: type-of($var), Value: inspect($var)"; }

C. @mixin debug($var) { content: "Type: #{type-of($var)}, Value: #{inspect($var)}"; }

D. @mixin debug($var) { content: "Type: #{inspect(type-of($var))}, Value: #{type-of(inspect($var))}"; }

Solution

1. Step 1: Understand string interpolation in Sass

   Use #{} to insert function results inside strings.

2. Step 2: Check each option's correctness

   @mixin debug($var) { content: "Type: #{type-of($var)}, Value: #{inspect($var)}"; } correctly calls type-of($var) and inspect($var) inside interpolation. @mixin debug($var) { content: "Type: type-of($var), Value: inspect($var)"; } treats functions as plain text. @mixin debug($var) { content: "Type: $var.type, Value: $var.inspect"; } uses invalid property access. @mixin debug($var) { content: "Type: #{inspect(type-of($var))}, Value: #{type-of(inspect($var))}"; } mixes function calls incorrectly.

3. Final Answer:

   @mixin debug($var) { content: "Type: #{type-of($var)}, Value: #{inspect($var)}"; } -> Option C

4. Quick Check:

   Use #{function()} for interpolation [OK]

Hint: Use #{ } to insert function results inside strings [OK]

Common Mistakes:

• Not using interpolation for function calls
• Trying to access functions as properties
• Nesting functions incorrectly