@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().

Practice

1. What does the @return statement do in Sass?

easy

A. It sends a value back from a Sass function.

B. It creates a new CSS rule.

C. It imports another Sass file.

D. It defines a variable.

Solution

1. Step 1: Understand the purpose of @return

   The @return statement is used inside a Sass function to send a value back to where the function was called.

2. Step 2: Differentiate from other Sass features

   Other options describe different Sass features: creating CSS rules, importing files, or defining variables, which are not the role of @return.

3. Final Answer:

   It sends a value back from a Sass function. -> Option A

4. Quick Check:

   @return sends value back [OK]

Hint: Remember: @return always sends a value back [OK]

Common Mistakes:

• Thinking @return creates CSS rules
• Confusing @return with variable declaration
• Using @return outside a function

2. Which of the following is the correct syntax to return a value from a Sass function named double that doubles a number $n?

easy

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

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

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

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

Solution

1. Step 1: Identify correct Sass function syntax

   In Sass, functions start with @function and use @return to send back a value.

2. Step 2: Check each option for correct usage

   @function double($n) { @return $n * 2; } uses @return correctly. @function double($n) { return $n * 2; } misses the @ before return. @function double($n) { $n * 2; } lacks any return statement. @function double($n) { @output $n * 2; } uses an invalid @output keyword.

3. Final Answer:

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

4. Quick Check:

   Use @return inside @function [OK]

Hint: Always use @return with @function [OK]

Common Mistakes:

• Omitting the '@' before return
• Forgetting to include a return statement
• Using invalid keywords like '@output'

3. What will be the output CSS of the following Sass code?

@function triple($x) {
  @return $x * 3;
}

.box {
  width: triple(10px);
}

medium

A. .box { width: 30px; }

B. .box { width: triple(10px); }

C. .box { width: 10px; }

D. Syntax error

Solution

1. Step 1: Understand the function behavior

   The function triple multiplies the input by 3 and returns the result.

2. Step 2: Calculate the returned value

   Calling triple(10px) returns 10px * 3 = 30px. This value is assigned to the width property.

3. Final Answer:

   .box { width: 30px; } -> Option A

4. Quick Check:

   Function returns 3 times input [OK]

Hint: Multiply input inside function, output is computed value [OK]

Common Mistakes:

• Expecting the function name to appear in CSS
• Ignoring units like px in calculations
• Assuming no multiplication happens

4. Identify the error in this Sass function:

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

medium

A. Cannot use addition inside functions.

B. Incorrect variable declaration syntax.

C. Missing @return statement to send back the result.

D. Function name should start with a dollar sign.

Solution

1. Step 1: Check function body for return statement

   The function calculates $sum but never returns it. Sass functions must use @return to send a value back.

2. Step 2: Verify other syntax elements

   Variable declaration and addition are correct. Function names do not start with a dollar sign. Addition is allowed inside functions.

3. Final Answer:

   Missing @return statement to send back the result. -> Option C

4. Quick Check:

   Functions need @return [OK]

Hint: Always end functions with @return [OK]

Common Mistakes:

• Forgetting to return the calculated value
• Thinking function names need $ prefix
• Assuming calculations auto-return

5. You want to create a Sass function adjust-color-brightness that takes a color and a percentage, then returns the color lightened or darkened by that percentage. Which of these is the best way to use @return inside this function?

hard

A. @function adjust-color-brightness($color, $percent) {
return if($percent > 0, lighten($color, $percent), darken($color, abs($percent)));
}

B. @function adjust-color-brightness($color, $percent) {
@if $percent > 0 {
@return lighten($color, $percent);
} @else {
@return darken($color, abs($percent));
}
}

C. @function adjust-color-brightness($color, $percent) {
lighten($color, $percent);
darken($color, abs($percent));
}

D. @function adjust-color-brightness($color, $percent) {
@return lighten($color, $percent);
@return darken($color, abs($percent));
}

Solution

1. Step 1: Understand conditional return usage

   The function should return either a lightened or darkened color based on the sign of $percent. Using @if with separate @return statements is clear and correct.

2. Step 2: Evaluate other options

   @function adjust-color-brightness($color, $percent) { return if($percent > 0, lighten($color, $percent), darken($color, abs($percent))); } uses return without @, which is invalid Sass syntax. @function adjust-color-brightness($color, $percent) { lighten($color, $percent); darken($color, abs($percent)); } lacks any @return, so no value is returned. @function adjust-color-brightness($color, $percent) { @return lighten($color, $percent); @return darken($color, abs($percent)); } has two @return statements in sequence, which is invalid because only one @return can be executed.

3. Final Answer:

   @function adjust-color-brightness($color, $percent) { @if $percent > 0 { @return lighten($color, $percent); } @else { @return darken($color, abs($percent)); } } -> Option B

4. Quick Check:

   Use conditional @return for multiple outcomes [OK]

Hint: Use one @return per condition inside functions [OK]

Common Mistakes:

• Placing multiple @return statements without conditions
• Not returning any value
• Using function calls without returning them