Function definition with @function in SASS - Mini Project: Build & Apply

Create a Sass Function with @function

📖 Scenario: You are styling a website and want to create a reusable Sass function that calculates the double of a number. This will help you keep your styles consistent and easy to update.

🎯 Goal: Build a Sass function named double that takes one number as input and returns its double. Then use this function to set the width of a container.

📋 What You'll Learn

Create a Sass function named double using @function

The function must take one parameter named $number

The function must return $number * 2

Use the double function to set the width of a .container class to double 100px

💡 Why This Matters

🌍 Real World

Sass functions help you write reusable and maintainable styles by calculating values dynamically.

💼 Career

Knowing how to write Sass functions is useful for front-end developers to create scalable CSS codebases.

1

Create the Sass function skeleton

Write a Sass function named double using @function that takes one parameter called $number. Do not add the return value yet.

SASS

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

Hint

Use @function followed by the function name and parameters in parentheses. Inside, use @return to send back a value.

2

Add the return statement to double the number

Modify the double function to return the value of $number * 2 instead of null.

SASS

@function double($number) {
  // Change the return value to double $number
}

Hint

Replace null with $number * 2 in the @return statement.

3

Use the function to set container width

Create a CSS class called .container and set its width property to the result of calling the double function with 100px as the argument.

SASS

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

.container {
  // Set width using double(100px)
}

Hint

Use the function by writing double(100px) as the value for width.

4

Add a comment explaining the function

Add a comment above the @function double line explaining that this function doubles a number.

SASS

// Your comment here
@function double($number) {
  @return $number * 2;
}

.container {
  width: double(100px);
}

Hint

Write a single-line comment starting with // describing the function.