@return statement in SASS - Mini Project: Build & Apply

Using the @return Statement in Sass Functions

📖 Scenario: You are creating a simple Sass function to calculate the double of a number. This is useful when you want to reuse a calculation in your styles without repeating the math.

🎯 Goal: Build a Sass function called double that takes a number and returns its double using the @return statement.

📋 What You'll Learn

Create a Sass function named double that accepts one parameter called $number.

Inside the function, use the @return statement to return the value of $number multiplied by 2.

Use the function to set a CSS variable --double-value inside the :root selector with the double of 5.

💡 Why This Matters

🌍 Real World

Sass functions with @return help you write reusable style calculations, making your CSS easier to maintain and update.

💼 Career

Knowing how to write Sass functions and use @return is valuable for front-end developers working with scalable and efficient stylesheets.

1

Create the Sass function skeleton

Write a Sass function named double that takes one parameter called $number. Start the function block with @function double($number) and open curly braces.

SASS

@function double($number) {
  // Your code here
}

Hint

Think of a function as a little machine that takes input and gives output. Here, you start by naming the function and its input.

2

Add the @return statement to the function

Inside the double function, write an @return statement that returns $number * 2.

SASS

@function double($number) {
  // Use @return to send back $number multiplied by 2
  // Your code here
}

Hint

The @return statement sends the result back to where the function was called. Multiply the input by 2.

3

Use the function in a CSS variable

Create a :root selector and inside it, define a CSS variable called --double-value. Set its value by calling the double function with the argument 5 using double(5).

SASS

@function double($number) {
  @return $number * 2;
}

:root {
  /* Define --double-value using double(5) */
  /* Your code here */
}

Hint

Use #{} to insert the function result into the CSS variable value.

4

Complete the Sass file with proper syntax

Make sure the Sass code is complete and valid by closing all blocks properly and using semicolons where needed. Confirm the @function block and the :root block are closed.

SASS

@function double($number) {
  @return $number * 2;
}

:root {
  --double-value: #{double(5)};
  // Your code here if needed
}

Hint

Check that all curly braces and semicolons are in place for valid Sass syntax.

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