Including mixins with @include in SASS - Mini Project: Build & Apply

Using Mixins with @include in Sass

📖 Scenario: You are creating a simple webpage style where multiple buttons share common styles. To avoid repeating code, you will use a Sass mixin and include it in different button classes.

🎯 Goal: Build a Sass stylesheet that defines a mixin called button-style with specific styles, then include this mixin in two button classes: .primary-button and .secondary-button.

📋 What You'll Learn

Create a mixin named button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-weight to bold.

Create a class .primary-button that includes the button-style mixin and sets background-color to #007bff and color to white.

Create a class .secondary-button that includes the button-style mixin and sets background-color to #6c757d and color to white.

Use the @include directive to include the mixin inside the button classes.

💡 Why This Matters

🌍 Real World

Mixins help keep CSS code clean and reusable, especially when many elements share similar styles like buttons.

💼 Career

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

1

Create the button-style mixin

Write a Sass mixin named button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-weight to bold.

SASS

// Define the button-style mixin here
// Your code here

Hint

Use @mixin button-style { ... } to define the mixin with the given styles inside.

2

Create the .primary-button class and include the mixin

Create a Sass class selector .primary-button that uses @include button-style to add the mixin styles, then set background-color to #007bff and color to white.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

// Create .primary-button class and include button-style mixin
// Your code here

Hint

Use .primary-button { @include button-style; background-color: #007bff; color: white; }.

3

Create the .secondary-button class and include the mixin

Create a Sass class selector .secondary-button that uses @include button-style to add the mixin styles, then set background-color to #6c757d and color to white.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.primary-button {
  @include button-style;
  background-color: #007bff;
  color: white;
}

// Create .secondary-button class and include button-style mixin
// Your code here

Hint

Use .secondary-button { @include button-style; background-color: #6c757d; color: white; }.

4

Add a hover effect to both buttons using the mixin

Add a hover style for both .primary-button and .secondary-button that changes the opacity to 0.8. Use the &:hover selector inside each button class.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.primary-button {
  @include button-style;
  background-color: #007bff;
  color: white;
  // Add hover effect here
}

.secondary-button {
  @include button-style;
  background-color: #6c757d;
  color: white;
  // Add hover effect here
}

Hint

Inside each button class, add &:hover { opacity: 0.8; } to create the hover effect.