Why custom functions are useful in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom function that returns double the input value.

SASS

@function double($number) {
  @return $number [1] 2;
}

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

A+

B/

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * will add 2 instead of doubling.

The * operator multiplies the input by 2, doubling it.

2fill in blank

medium

Complete the code to call the custom function double with the argument 5.

SASS

.box {
  width: [1];
}

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

Adouble(5)em

Bdouble(5)

Cdouble(5)px

Ddouble 5

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses or units causes errors or unexpected results.

Calling double(5) returns 10, and adding em sets the width in relative units.

3fill in blank

hard

Fix the error in the function by completing the return statement to subtract 1 from the input.

SASS

@function decrement($num) {
  @return $num [1] 1;
}

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

A/

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using + adds instead of subtracting.

The minus operator - subtracts 1 from the input number.

4fill in blank

hard

Fill both blanks to create a function that returns the square of a number minus 1.

SASS

@function square($n) {
  @return $n [1] $n [2] 1;
}

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

A*

B+

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of * changes the meaning.

The function multiplies the number by itself and subtracts 1 to return the square minus one.

5fill in blank

hard

Fill all three blanks to create a function that returns half the input plus 3.

SASS

@function half_plus_three($val) {
  @return ($val [1] 2) [2] 3 [3] 0;
}

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

A/

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using * instead of / changes the calculation.

The function divides the value by 2, adds 3, and subtracts 0 (which does nothing but completes syntax).