@return statement in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @return statement do in Sass?

It sends a value back from a Sass function to where the function was called. This lets you use the result in your styles.

beginner

How do you write a simple Sass function that returns a color?

You define the function with @function, then use @return to send back the color.

@function primary-color() {
  @return #3498db;
}

intermediate

Can @return send back any type of value in Sass?

Yes, it can return colors, numbers, strings, lists, maps, or booleans from a function.

intermediate

What happens if a Sass function does not have a @return statement?

The function returns null by default, which means no value is sent back.

beginner

Why is @return important in Sass functions?

It lets you create reusable code that calculates values once and sends them back to use anywhere in your styles.

What keyword do you use in Sass to send a value back from a function?

A @send

B @yield

C @return

D @output

The @return keyword is used to send a value back from a Sass function.

What type of value can @return NOT send back in Sass?

A Functions

B Numbers

C Colors

D Strings

@return can send back colors, numbers, strings, lists, maps, and booleans, but not functions themselves.

What happens if a Sass function has no @return statement?

A It returns <code>null</code>

B It throws an error

C It returns <code>0</code>

D It returns the last variable

Without @return, a Sass function returns null by default.

Where do you use the value sent back by @return?

A Inside the function only

B In comments

C In a different file only

D Where the function is called

The returned value is used where the function is called in your Sass code.

Which of these is a correct way to return a value in a Sass function?

A return 10px;

B @return 10px;

C send 10px;

D @yield 10px;

In Sass, you use @return followed by the value and a semicolon.

Explain how the @return statement works in Sass functions and why it is useful.

Think about how functions give back results to use later.

Write a simple Sass function that returns a color using @return and describe what happens when you call it.

Start with @function, then @return the color.

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