Why mixins eliminate duplication in SASS - See It in Action

Why Mixins Eliminate Duplication in Sass

📖 Scenario: You are creating styles for a website with multiple buttons that share common styles but differ slightly in color.

🎯 Goal: Build a Sass stylesheet that uses a mixin to avoid repeating button styles and apply it to different button classes with unique colors.

📋 What You'll Learn

Create a mixin named button-style that sets padding, border-radius, and font-size

Create a variable named $primary-color with the value #3498db

Use the button-style mixin inside a .btn-primary class and set its background color to $primary-color

Use the button-style mixin inside a .btn-secondary class and set its background color to #2ecc71

💡 Why This Matters

🌍 Real World

Web designers often style many buttons or components with similar styles but different colors or sizes. Mixins help keep the code DRY (Don't Repeat Yourself).

💼 Career

Knowing how to use Sass mixins is important for front-end developers to write efficient, maintainable CSS for large projects.

1

Create the button-style mixin

Write a Sass mixin called button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-size to 1.25rem.

SASS

// Define the button-style mixin with padding, border-radius, and font-size
// Your code here

Hint

Use @mixin button-style { ... } and inside set the three CSS properties.

2

Create the $primary-color variable

Create a Sass variable named $primary-color and assign it the color value #3498db.

SASS

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

// Create $primary-color variable with #3498db
// Your code here

Hint

Use $primary-color: #3498db; to create the variable.

3

Use the mixin in .btn-primary with $primary-color

Create a CSS class .btn-primary that includes the button-style mixin and sets background-color to $primary-color.

SASS

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

$primary-color: #3498db;

// Create .btn-primary class using button-style mixin and background-color $primary-color
// Your code here

Hint

Use .btn-primary { @include button-style; background-color: $primary-color; }.

4

Use the mixin in .btn-secondary with a different color

Create a CSS class .btn-secondary that includes the button-style mixin and sets background-color to #2ecc71.

SASS

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

$primary-color: #3498db;

.btn-primary {
  @include button-style;
  background-color: $primary-color;
}

// Create .btn-secondary class using button-style mixin and background-color #2ecc71
// Your code here

Hint

Use .btn-secondary { @include button-style; background-color: #2ecc71; }.