Mixin libraries pattern in SASS - Mini Project: Build & Apply

Creating a Mixin Library in Sass

📖 Scenario: You are building a small style library for buttons in a website. You want to create reusable mixins in Sass to keep your styles clean and easy to maintain.

🎯 Goal: Build a Sass mixin library with two mixins: one for a primary button style and one for a secondary button style. Then use these mixins in CSS classes.

📋 What You'll Learn

Create a Sass file with two mixins named primary-button and secondary-button

Each mixin should set background color, text color, padding, and border radius

Create CSS classes .btn-primary and .btn-secondary that use the respective mixins

Use semantic color choices for primary (blue background, white text) and secondary (gray background, black text) buttons

💡 Why This Matters

🌍 Real World

Mixin libraries in Sass are used in real projects to create reusable style blocks that can be applied consistently across many components, saving time and avoiding mistakes.

💼 Career

Knowing how to create and use mixin libraries is a valuable skill for front-end developers working with Sass or other CSS preprocessors, improving code maintainability and scalability.

1

Create the primary-button mixin

Write a Sass mixin named primary-button that sets background-color to #007BFF, color to #FFFFFF, padding to 0.5rem 1rem, and border-radius to 0.25rem.

SASS

// Your code here

Need a hint?

Use the @mixin directive followed by the mixin name and curly braces. Inside, add the CSS properties with the exact values.

2

Create the secondary-button mixin

Write a Sass mixin named secondary-button that sets background-color to #6C757D, color to #000000, padding to 0.5rem 1rem, and border-radius to 0.25rem.

SASS

@mixin primary-button {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

// Your code here

Need a hint?

Follow the same pattern as the primary-button mixin but with the new colors.

3

Create the .btn-primary class using the primary-button mixin

Write a CSS class named .btn-primary that includes the primary-button mixin using @include primary-button;.

SASS

@mixin primary-button {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

@mixin secondary-button {
  background-color: #6C757D;
  color: #000000;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.btn-primary {
  // Your code here
}

Need a hint?

Define the class with curly braces and use @include to add the mixin styles.

4

Create the .btn-secondary class using the secondary-button mixin

Write a CSS class named .btn-secondary that includes the secondary-button mixin using @include secondary-button;.

SASS

@mixin primary-button {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

@mixin secondary-button {
  background-color: #6C757D;
  color: #000000;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.btn-primary {
  @include primary-button;
}

.btn-secondary {
  // Your code here
}

Need a hint?

Use the same pattern as the .btn-primary class but include the secondary-button mixin.