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.

Practice

1. What does the @function directive do in Sass?

easy

A. It defines reusable code blocks that return values.

B. It imports external CSS files.

C. It creates variables for colors.

D. It applies styles to HTML elements.

Solution

1. Step 1: Understand the purpose of @function

   The @function directive in Sass is used to create reusable blocks of code that can return a value.

2. Step 2: Compare with other options

   Options A, B, and D describe other Sass or CSS features, but only C correctly describes @function.

3. Final Answer:

   It defines reusable code blocks that return values. -> Option A

4. Quick Check:

   @function creates reusable code blocks [OK]

Hint: Remember: @function returns values, not styles directly [OK]

Common Mistakes:

• Confusing @function with @mixin
• Thinking @function applies styles
• Mixing up @function with variable declaration

2. Which of the following is the correct syntax to define a function named double that returns twice the input $n in Sass?

easy

A. @function double($n) { @return $n * 2; }

B. @function double($n) { return $n * 2; }

C. function double($n) { @return $n * 2; }

D. @mixin double($n) { @return $n * 2; }

Solution

1. Step 1: Check the function declaration syntax

   In Sass, functions start with @function, followed by the name and parameters in parentheses.

2. Step 2: Verify the return statement

   The correct way to return a value is using @return, not just return.

3. Final Answer:

   @function double($n) { @return $n * 2; } -> Option A

4. Quick Check:

   Use @function and @return for Sass functions [OK]

Hint: Use @function and @return keywords exactly [OK]

Common Mistakes:

• Using 'return' instead of '@return'
• Omitting the @ in @function
• Confusing @function with @mixin

3. Given the Sass function:

@function add($a, $b) { @return $a + $b; }

What will be the output of this Sass code?

.result { width: add(10px, 5px); }

medium

A. .result { width: 10px 5px; }

B. .result { width: 15px; }

C. Syntax error

D. .result { width: add(10px, 5px); }

Solution

1. Step 1: Understand the function behavior

   The function add takes two values and returns their sum using @return $a + $b;.

2. Step 2: Apply the function in the style

   Calling add(10px, 5px) returns 15px, so the CSS becomes .result { width: 15px; }.

3. Final Answer:

   .result { width: 15px; } -> Option B

4. Quick Check:

   Function returns sum, so width is 15px [OK]

Hint: Functions return values, so output replaces function call [OK]

Common Mistakes:

• Expecting function name to appear in output
• Confusing list output with addition
• Thinking it causes syntax error

4. Identify the error in this Sass function:

@function multiply($x, $y) { return $x * $y; }

medium

A. Parameters must be strings

B. Function name is invalid

C. Missing @ before return keyword

D. Function cannot have two parameters

Solution

1. Step 1: Check the return statement syntax

   In Sass functions, the return keyword must be @return, not just return.

2. Step 2: Verify other parts

   The function name and parameters are valid, and multiple parameters are allowed.

3. Final Answer:

   Missing @ before return keyword -> Option C

4. Quick Check:

   Use @return, not return [OK]

Hint: Always use @return in Sass functions [OK]

Common Mistakes:

• Using 'return' without @
• Thinking parameters must be strings
• Believing function names can't have multiple parameters

5. You want to create a Sass function shade-color that darkens a color by a percentage. Which of these function definitions correctly uses @function and @return to achieve this?

A) @function shade-color($color, $percent) { @return darken($color, $percent); }
B) @function shade-color($color, $percent) { return darken($color, $percent); }
C) @mixin shade-color($color, $percent) { @return darken($color, $percent); }
D) @function shade-color($color, $percent) { darken($color, $percent); }

hard

A. @function shade-color($color, $percent) { darken($color, $percent); }

B. @function shade-color($color, $percent) { return darken($color, $percent); }

C. @mixin shade-color($color, $percent) { @return darken($color, $percent); }

D. @function shade-color($color, $percent) { @return darken($color, $percent); }

Solution

1. Step 1: Confirm correct function syntax

   The function must start with @function and use @return to send back the value.

2. Step 2: Check each option

   @function shade-color($color, $percent) { @return darken($color, $percent); } uses @function and @return correctly. @function shade-color($color, $percent) { return darken($color, $percent); } uses return without @, which is invalid. @mixin shade-color($color, $percent) { @return darken($color, $percent); } uses @mixin instead of @function. @function shade-color($color, $percent) { darken($color, $percent); } lacks a return statement.

3. Final Answer:

   @function shade-color($color, $percent) { @return darken($color, $percent); } -> Option D

4. Quick Check:

   Use @function with @return for value-returning functions [OK]

Hint: Functions need @return; mixins do not return values [OK]

Common Mistakes:

• Using return without @
• Confusing mixin with function
• Omitting @return statement