Functions with parameters in SASS - Mini Project: Build & Apply

Using Functions with Parameters in Sass

📖 Scenario: You are creating a simple style for buttons on a website. You want to use a Sass function to calculate the padding size based on a base size and a multiplier. This helps keep your styles consistent and easy to update.

🎯 Goal: Build a Sass function called calculate-padding that takes two parameters: $base and $multiplier. Use this function to set the padding of a button with a base size of 0.5rem and a multiplier of 3.

📋 What You'll Learn

Create a Sass function named calculate-padding with parameters $base and $multiplier.

Inside the function, return the product of $base and $multiplier.

Use the calculate-padding function to set the padding of a .button class.

Set the base padding size to 0.5rem and the multiplier to 3 when calling the function.

Ensure the Sass code compiles to valid CSS that styles the button's padding correctly.

💡 Why This Matters

🌍 Real World

Using functions in Sass helps keep styles consistent and easy to update across a website, especially for spacing and sizing.

💼 Career

Knowing how to write and use Sass functions is valuable for front-end developers to write maintainable and scalable CSS.

1

Create the Sass function skeleton

Write a Sass function named calculate-padding that takes two parameters: $base and $multiplier. For now, just start the function block without returning anything.

SASS

@function calculate-padding($base, $multiplier) {
  // Your code here
}

Hint

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

2

Return the product of parameters

Modify the calculate-padding function to return the product of $base and $multiplier using the multiplication operator.

SASS

@function calculate-padding($base, $multiplier) {
  // Return the product of $base and $multiplier
  @return $base * $multiplier;
}

Hint

Use @return $base * $multiplier; to multiply the two parameters and return the result.

3

Use the function to set button padding

Create a CSS rule for the class .button. Inside it, set the padding property to the result of calling calculate-padding with 0.5rem as $base and 3 as $multiplier.

SASS

@function calculate-padding($base, $multiplier) {
  @return $base * $multiplier;
}

.button {
  // Set padding using calculate-padding function
}

Hint

Use the function call inside the padding property like this: padding: calculate-padding(0.5rem, 3);

4

Complete with a hover style using the function

Add a :hover style for the .button class that increases the padding by using calculate-padding with 0.5rem as $base and 4 as $multiplier.

SASS

@function calculate-padding($base, $multiplier) {
  @return $base * $multiplier;
}

.button {
  padding: calculate-padding(0.5rem, 3);
  // Add :hover style with increased padding
}

Hint

Use the nested selector &:hover inside .button and call the function with multiplier 4.