@return statement in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to return the sum of two numbers from the function.

SASS

@function add($a, $b) {
  @return [1];
}

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

A$a * $b

B$a - $b

C$a + $b

D$a / $b

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction (-) instead of addition (+).

Forgetting to use the @return keyword.

Returning a variable that is not defined.

The @return statement sends back the result of $a + $b from the function.

2fill in blank

medium

Complete the code to return the color value from the function.

SASS

@function get-primary-color() {
  $color: #3498db;
  @return [1];
}

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

A$primary-color

Bprimary-color

C#3498db

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a variable that is not defined.

Returning the color value as a string without the $ sign.

Using a variable name that does not exist.

The function returns the value stored in $color using @return $color.

3fill in blank

hard

Fix the error in the function to correctly return the doubled value.

SASS

@function double($num) {
  $result: $num * 2;
  @return [1];
}

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

A$num * 2

B$result

C$num + 2

D$num

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the original number instead of the doubled value.

Returning the expression instead of the stored variable.

Missing semicolon after $result assignment (not shown here but important).

The function stores the doubled value in $result and returns it with @return $result.

4fill in blank

hard

Fill both blanks to create a function that returns the font size in rem units.

SASS

@function font-size($px) {
  $rem: $px [1] 16;
  @return $rem [2] 1rem;
}

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

A/

B*

C()

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Using multiplication instead of division for conversion.

Forgetting to multiply by 1rem to attach the unit.

Returning the raw number without units.

Divide $px by 16 to convert to rem, then return $rem * 1rem to attach the rem unit.

5fill in blank

hard

Fill all three blanks to create a function that returns a color with adjusted opacity.

SASS

@function transparent-color($color, $opacity) {
  $rgba: rgba([1], [2], [3], $opacity);
  @return $rgba;
}

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

Ared($color)

Bgreen($color)

Cblue($color)

Dalpha($color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using alpha() instead of color channels.

Passing the whole color variable instead of channels.

Mixing up the order of color channels.

Use red(), green(), and blue() functions to extract color channels for rgba().