Function definition with @function in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a function named double that returns twice 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 instead of multiply.

Using / will divide the number, not double it.

The @function keyword defines a function in Sass. To double a number, multiply it by 2 using the * operator.

2fill in blank

medium

Complete the code to define a function named is-even that returns true if the input number is even.

SASS

@function is-even($num) {
  @return $num [1] 2 == 0;
}

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

A-

B*

C+

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Using * or + instead of % will not check for evenness.

Using - will subtract, not check remainder.

The modulo operator % gives the remainder. If $num % 2 equals 0, the number is even.

3fill in blank

hard

Fix the error in the function that returns the square of a number.

SASS

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

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

A*

B**

C^

D//

Attempts:

3 left

💡 Hint

Common Mistakes

Using ** or ^ causes errors in Sass.

Using // is for integer division, not power.

Sass does not support the ** or ^ operators for powers. Use * to multiply the number by itself.

4fill in blank

hard

Fill both blanks to create a function max-value that returns the larger of two numbers.

SASS

@function max-value($a, $b) {
  @if $a [1] $b {
    @return $a;
  } @else {
    @return $b;
  }
}

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

A==

B<

C>

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using < instead of > will return the smaller number.

Using == or != will not compare size.

The function compares two numbers. If $a is greater than $b, return $a. Otherwise, return $b.

5fill in blank

hard

Fill both blanks to create a function clamp that limits a number between a minimum and maximum.

SASS

@function clamp($value, $min, $max) {
  @if $value [1] $min {
    @return $min;
  } @else if $value [2] $max {
    @return $max;
  } @else {
    @return $value;
  }
}

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

A<

B>

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong comparison operators reverses logic.

Adding extra operators after $value causes errors.

The function checks if $value is less than $min, returns $min. If greater than $max, returns $max. Otherwise, returns $value as is.