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

Using Mixins with Parameters in Sass

📖 Scenario: You are designing a simple website and want to reuse a button style with different colors. Instead of writing the same CSS multiple times, you will use a Sass mixin with parameters to create buttons with different background colors.

🎯 Goal: Create a Sass mixin named button-style that accepts a $color parameter. Use this mixin to style two buttons with different background colors.

📋 What You'll Learn

Create a mixin named button-style with a $color parameter

The mixin should set the background color to $color, text color to white, padding to 1rem 2rem, and border-radius to 0.5rem

Use the mixin to style a button with class .btn-primary with background color #007bff

Use the mixin to style a button with class .btn-success with background color #28a745

💡 Why This Matters

🌍 Real World

Mixins with parameters are used in real projects to write reusable, customizable styles that save time and reduce errors.

💼 Career

Knowing how to write and use Sass mixins with parameters is a valuable skill for front-end developers working on scalable CSS codebases.

1

Create the button-style mixin with a $color parameter

Write a Sass mixin named button-style that takes one parameter called $color. Inside the mixin, set background-color to $color, color to white, padding to 1rem 2rem, and border-radius to 0.5rem.

SASS

// Your code here

Hint

Use @mixin to define a mixin and include the parameter $color in parentheses.

2

Style the .btn-primary button using the mixin with color #007bff

Write a CSS rule for the class .btn-primary. Inside it, include the button-style mixin with the argument #007bff.

SASS

@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.btn-primary {
  // Your code here
}

Hint

Use @include followed by the mixin name and the color argument inside parentheses.

3

Style the .btn-success button using the mixin with color #28a745

Write a CSS rule for the class .btn-success. Inside it, include the button-style mixin with the argument #28a745.

SASS

@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

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

.btn-success {
  // Your code here
}

Hint

Repeat the same pattern as for .btn-primary, but use the color #28a745.

4

Add a hover effect to both buttons using the mixin with a darker color

Inside both .btn-primary and .btn-success rules, add a :hover selector. Use the button-style mixin with #0056b3 for .btn-primary:hover and #1e7e34 for .btn-success:hover.

SASS

@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.btn-primary {
  @include button-style(#007bff);

  &:hover {
    // Your code here
  }
}

.btn-success {
  @include button-style(#28a745);

  &:hover {
    // Your code here
  }
}

Hint

Use the nested &:hover selector inside each button class and include the mixin with the darker color.