Why custom functions are useful in SASS - See It in Action

Why Custom Functions Are Useful in Sass

📖 Scenario: You are creating a style sheet for a website. You want to reuse a calculation for colors to keep your code clean and easy to update.

🎯 Goal: Build a Sass file that defines a custom function to darken a color by a fixed amount, then use that function to style a button's background color.

📋 What You'll Learn

Create a custom function called darken-color that takes one color parameter

Inside the function, return the color darkened by 20%

Create a variable $base-color with the value #3498db

Use the darken-color function to set the background color of a button

💡 Why This Matters

🌍 Real World

Custom functions in Sass let you write reusable code for common style calculations, saving time and reducing mistakes.

💼 Career

Knowing how to write and use custom functions is important for front-end developers to create maintainable and scalable CSS.

1

Create the base color variable

Create a Sass variable called $base-color and set it to the color #3498db.

SASS

# Create the base color variable
# Your code here

Hint

Use $base-color: #3498db; to create the variable.

2

Define the custom function darken-color

Write a custom Sass function called darken-color that takes one parameter named $color and returns the color darkened by 20%. Use the built-in darken() function inside your custom function.

SASS

$base-color: #3498db;

// Define the darken-color function
// Your code here

Hint

Use @function darken-color($color) { @return darken($color, 20%); }.

3

Use the custom function to style a button

Create a CSS rule for button that sets its background-color to the result of calling darken-color with $base-color as the argument.

SASS

$base-color: #3498db;

@function darken-color($color) {
  @return darken($color, 20%);
}

button {
  // Set background-color using darken-color function
  // Your code here
}

Hint

Use background-color: darken-color($base-color); inside the button rule.

4

Add a hover effect using the custom function

Add a :hover style for the button that sets the background-color to the original $base-color (not darkened).

SASS

$base-color: #3498db;

@function darken-color($color) {
  @return darken($color, 20%);
}

button {
  background-color: darken-color($base-color);
  
  // Add hover background color
  // Your code here
}

Hint

Use &:hover { background-color: $base-color; } inside the button rule.