Functions vs mixins comparison in SASS - Hands-On Comparison

Functions vs Mixins Comparison in Sass

📖 Scenario: You are creating a simple style guide for buttons. You want to compare how Sass functions and mixins work by using both to style buttons with dynamic colors and padding.

🎯 Goal: Build a Sass stylesheet that uses a darken-color function to darken a color and a button-style mixin to apply styles to buttons. See how functions return values and mixins output CSS blocks.

📋 What You'll Learn

Create a Sass function named darken-color that takes a color and returns it darkened by 10%.

Create a Sass mixin named button-style that takes a color and padding size and applies background color, text color, and padding.

Use the darken-color function inside the button-style mixin to set the background color.

Apply the button-style mixin to two different button classes with different colors and padding.

💡 Why This Matters

🌍 Real World

Web developers use Sass functions and mixins to write reusable and maintainable styles for websites and apps.

💼 Career

Knowing how to write and use Sass functions and mixins is important for front-end developers to create efficient CSS and speed up styling tasks.

1

Create the darken-color function

Write a Sass function called darken-color that takes one parameter $color and returns the color darkened by 10% using the darken() function.

SASS

// Your code here

Hint

Use @function to define a function and @return to send back the darkened color.

2

Create the button-style mixin

Write a Sass mixin called button-style that takes two parameters: $color and $padding. Inside the mixin, set background-color to the result of calling darken-color($color), color to white, and padding to $padding.

SASS

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

// Your code here

Hint

Use @mixin to create a mixin and call the function inside it.

3

Apply the button-style mixin to buttons

Create two CSS classes: .btn-primary and .btn-secondary. Use the @include button-style mixin inside each class. For .btn-primary, pass #007bff as color and 1rem 2rem as padding. For .btn-secondary, pass #6c757d as color and 0.5rem 1rem as padding.

SASS

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

@mixin button-style($color, $padding) {
  background-color: darken-color($color);
  color: white;
  padding: $padding;
}

// Your code here

Hint

Use @include to apply the mixin inside each CSS class.

4

Add comments explaining functions vs mixins

Add comments at the top of the file explaining that the darken-color function returns a value to use in styles, while the button-style mixin outputs CSS rules directly where included.

SASS

// Your comment here

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

@mixin button-style($color, $padding) {
  background-color: darken-color($color);
  color: white;
  padding: $padding;
}

.btn-primary {
  @include button-style(#007bff, 1rem 2rem);
}

.btn-secondary {
  @include button-style(#6c757d, 0.5rem 1rem);
}

Hint

Write clear comments starting with // to explain the difference.