Mixin definition with @mixin in SASS - Mini Project: Build & Apply

Create a Sass Mixin with @mixin

📖 Scenario: You are building a website and want to reuse a style block for buttons. Instead of repeating the same styles, you will create a Sass mixin to keep your code clean and easy to update.

🎯 Goal: Create a Sass mixin named button-style that sets the background color to blue, text color to white, and padding to 1rem. Then use this mixin inside a CSS class .btn.

📋 What You'll Learn

Define a mixin called button-style using @mixin

Inside the mixin, set background-color to blue

Set color to white inside the mixin

Set padding to 1rem inside the mixin

Create a CSS class .btn that includes the button-style mixin using @include

💡 Why This Matters

🌍 Real World

Mixins let you write reusable style blocks in Sass, saving time and making your CSS easier to maintain.

💼 Career

Web developers use Sass mixins to create scalable and clean style sheets for websites and apps.

1

Define the button-style mixin

Write a Sass mixin named button-style using @mixin button-style that sets background-color to blue, color to white, and padding to 1rem inside curly braces.

SASS

# Define the @mixin button-style with background-color blue, color white, and padding 1rem

Hint

Use @mixin followed by the mixin name and curly braces to group styles.

2

Create the .btn class

Create a CSS class named .btn using .btn { } syntax. Leave it empty for now.

SASS

@mixin button-style {
  background-color: blue;
  color: white;
  padding: 1rem;
}

.btn {
  /* Your code here */
}

Hint

Use a dot before the class name and curly braces to create a CSS class.

3

Include the button-style mixin inside .btn

Inside the .btn class, use @include button-style; to apply the mixin styles.

SASS

@mixin button-style {
  background-color: blue;
  color: white;
  padding: 1rem;
}

.btn {
  /* Include the button-style mixin here */
}

Hint

Use @include followed by the mixin name and a semicolon inside the class.

4

Complete the Sass code for button styling

Make sure the Sass code has the @mixin button-style defined and the .btn class includes the mixin with @include button-style;.

SASS

@mixin button-style {
  background-color: blue;
  color: white;
  padding: 1rem;
}

.btn {
  @include button-style;
}

/* Your code here if needed */

Hint

Review your code to ensure the mixin and include are correctly written.