sass:meta module (type-of, inspect) - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the output of type-of for a list?

Consider the Sass code:

$value: (1, 2, 3);
$result: type-of($value);

What is the value of $result?

SASS

$value: (1, 2, 3);
$result: type-of($value);

A "list"

B "map"

C "string"

D "number"

💡 Hint

Think about how Sass groups multiple values separated by commas.

The type-of function returns the type of the value passed. A value like (1, 2, 3) is a list in Sass, so the output is "list".

📝 Syntax

intermediate

What does inspect output for a color?

Given this Sass code:

$color: #ff0000;
$text: inspect($color);

What is the value of $text?

SASS

$color: #ff0000;
$text: inspect($color);

A "#f00"

B "red"

C "rgb(255, 0, 0)"

D "#ff0000"

💡 Hint

The inspect function returns a string representation of the value as Sass sees it.

The inspect function returns the exact string representation of the value. For the hex color #ff0000, it returns the full hex string "#ff0000".

❓ selector

advanced

Which type-of result matches a Sass map?

What does type-of return when called on a Sass map like (key: value)?

SASS

$map: (key: value);
$result: type-of($map);

A "list"

B "map"

C "string"

D "null"

💡 Hint

Maps are key-value pairs in Sass.

A Sass map is a collection of key-value pairs. The type-of function returns "map" for such values.

❓ rendering

advanced

What does inspect output for a nested list?

Given this Sass code:

$nested: (1, (2, 3));
$text: inspect($nested);

What is the value of $text?

SASS

$nested: (1, (2, 3));
$text: inspect($nested);

A "(1, 2, (3))"

B "1, 2, 3"

C "(1, (2, 3))"

D "(1, 2, 3)"

💡 Hint

The inspect function shows the exact structure including nested parentheses.

The inspect function returns a string that represents the value exactly as it is, including nested lists with parentheses.

❓ accessibility

expert

What error occurs when calling type-of on an undefined variable?

Consider this Sass code:

$result: type-of($undefined-variable);

What error will Sass raise?

SASS

$result: type-of($undefined-variable);

A Undefined variable error

B Type error

C Syntax error

D No error, returns "null"

💡 Hint

Using a variable that was never declared causes an error.

Sass raises an undefined variable error when you try to use a variable that has not been declared or assigned a value.