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

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

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
}

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
}

Hint

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

Practice

1. What is the main purpose of using mixin libraries in Sass?

easy

A. To create HTML templates

B. To write plain CSS without variables

C. To compile Sass into JavaScript

D. To group reusable style blocks for consistent styling

Solution

1. Step 1: Understand mixins in Sass

   Mixins are reusable blocks of styles that help avoid repetition.

2. Step 2: Purpose of mixin libraries

   Mixin libraries group many mixins to keep styling consistent and reusable across projects.

3. Final Answer:

   To group reusable style blocks for consistent styling -> Option D

4. Quick Check:

   Mixin libraries = reusable style groups [OK]

Hint: Mixins group styles; libraries group mixins [OK]

Common Mistakes:

• Confusing mixins with plain CSS
• Thinking mixins create HTML
• Believing mixins compile to JavaScript

2. Which of the following is the correct syntax to include a mixin named button-style in Sass?

easy

A. @mixin button-style;

B. @include button-style;

C. include(button-style);

D. @use button-style;

Solution

1. Step 1: Recall mixin creation syntax

   Mixins are created with @mixin name { ... }.

2. Step 2: Recall mixin usage syntax

   To apply a mixin, use @include name;.

3. Final Answer:

   @include button-style; -> Option B

4. Quick Check:

   Use @include to apply mixins [OK]

Hint: Use @include to apply mixins, not @mixin [OK]

Common Mistakes:

• Using @mixin instead of @include to apply
• Writing include() like a function
• Confusing @use with @include

3. Given the Sass code:

@mixin card-style {
  border: 1px solid #ccc;
  padding: 1rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.card {
  @include card-style;
  background-color: white;
}

What CSS will be generated for the .card class?

medium

A. .card { border: 1px solid #ccc; padding: 1rem; box-shadow: 0 0 5px rgba(0,0,0,0.1); background-color: white; }

B. .card { @include card-style; background-color: white; }

C. .card { border: none; padding: 0; background-color: white; }

D. Syntax error, no CSS generated

Solution

1. Step 1: Understand mixin content

   The mixin card-style defines border, padding, and box-shadow styles.

2. Step 2: Applying mixin in .card

   Using @include card-style; inserts those styles inside .card, plus the background color.

3. Final Answer:

   .card { border: 1px solid #ccc; padding: 1rem; box-shadow: 0 0 5px rgba(0,0,0,0.1); background-color: white; } -> Option A

4. Quick Check:

   Mixin styles + extra styles = full CSS block [OK]

Hint: Mixin styles expand fully inside selector [OK]

Common Mistakes:

• Expecting @include to remain in CSS output
• Ignoring mixin styles when included
• Thinking mixins cause syntax errors

4. Identify the error in this Sass code snippet:

@mixin text-style {
  font-size: 1.2rem;
  color: #333;
}

.title {
  @mixin text-style;
  font-weight: bold;
}

medium

A. Missing semicolon after font-weight

B. Mixin name should be .text-style with dot

C. Using @mixin instead of @include inside .title

D. Cannot use mixins inside class selectors

Solution

1. Step 1: Check mixin usage syntax

   Mixins are created with @mixin but applied with @include.

2. Step 2: Identify incorrect usage

   The code uses @mixin text-style; inside .title, which is wrong syntax.

3. Final Answer:

   Using @mixin instead of @include inside .title -> Option C

4. Quick Check:

   Apply mixins with @include, not @mixin [OK]

Hint: Use @include to apply mixins, never @mixin [OK]

Common Mistakes:

• Confusing @mixin and @include
• Adding dot before mixin name
• Thinking mixins can't be used in selectors

5. You have a mixin library with multiple mixins for buttons. You want to create a new mixin primary-button that uses the existing button-base mixin and adds a blue background. Which Sass code correctly achieves this?

hard

A. @mixin primary-button { @include button-base; background-color: blue; }

B. @mixin primary-button { @mixin button-base; background-color: blue; }

C. @include primary-button { @include button-base; background-color: blue; }

D. @mixin primary-button { button-base(); background-color: blue; }

Solution

1. Step 1: Define new mixin with @mixin

   Use @mixin primary-button { ... } to create the new mixin.

2. Step 2: Include existing mixin inside new one

   Inside the new mixin, use @include button-base; to reuse styles.

3. Step 3: Add additional styles

   Add background-color: blue; after including the base mixin.

4. Final Answer:

   @mixin primary-button { @include button-base; background-color: blue; } -> Option A

5. Quick Check:

   New mixin includes old mixin + extra styles [OK]

Hint: Nest @include inside @mixin to combine styles [OK]

Common Mistakes:

• Using @mixin instead of @include inside mixin body
• Trying to call mixins like functions
• Using @include outside mixin definition incorrectly