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