sass:meta module (type-of, inspect) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the type of the variable $color using type-of.

SASS

$color: #ff0000;
$type: [1]($color);

Drag options to blanks, or click blank then click option'

Atype-of

Binspect

Clength

Dunit

Attempts:

3 left

💡 Hint

Common Mistakes

Using inspect instead of type-of returns a string representation, not the type.

Using length or unit which are unrelated here.

The type-of function returns the type of a Sass value, such as color for $color.

2fill in blank

medium

Complete the code to print the value of $font-size using inspect.

SASS

$font-size: 1.5rem;
@debug [1]($font-size);

Drag options to blanks, or click blank then click option'

Atype-of

Bunit

Cinspect

Dpercentage

Attempts:

3 left

💡 Hint

Common Mistakes

Using type-of which returns the type, not the value.

Using unit which returns the unit of a number.

The inspect function returns a string that shows the value clearly, useful for debugging.

3fill in blank

hard

Fix the error in the code to correctly get the type of $margin.

SASS

$margin: 10px;
$type: [1]$margin);

Drag options to blanks, or click blank then click option'

Ainspect(

Btype-of(

Ctype-of

Dinspect

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses causes syntax errors.

Using inspect without parentheses.

The type-of function requires parentheses around its argument, so use type-of( $margin ).

4fill in blank

hard

Fill both blanks to create a debug message showing the type and value of $padding.

SASS

$padding: 2em;
@debug "Type:  #{ [1] }, Value:  #{ [2] } ";

Drag options to blanks, or click blank then click option'

Atype-of($padding)

Binspect($padding)

Ctype-of

Dinspect

Attempts:

3 left

💡 Hint

Common Mistakes

Using function names without parentheses.

Mixing up type-of and inspect.

Use type-of($padding) to get the type and inspect($padding) to get the value as a string for debugging.

5fill in blank

hard

Fill all three blanks to create a map with keys as the type of each variable and values as their inspected values.

SASS

$color: #0000ff;
$size: 12px;
$flag: true;
$result: (
  [1]: [2],
  [3]: inspect($size),
  type-of($flag): inspect($flag)
);

Drag options to blanks, or click blank then click option'

Atype-of($color)

Binspect($color)

Ctype-of($size)

Dinspect($flag)

Attempts:

3 left

💡 Hint

Common Mistakes

Using inspect for keys instead of type-of.

Forgetting parentheses in function calls.

The map keys are the types of variables using type-of, and the values are their inspected string forms using inspect.