Mixin libraries pattern in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS mixin usage?

Given the following SASS code, what CSS will be generated?

$color-primary: #3498db;

@mixin button-style($bg-color) {
  background-color: $bg-color;
  border: none;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

.button {
  @include button-style($color-primary);
}

SASS

$color-primary: #3498db;

@mixin button-style($bg-color) {
  background-color: $bg-color;
  border: none;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

.button {
  @include button-style($color-primary);
}

A

.button {
  background-color: #000000;
  border: none;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

B

.button {
  background-color: #3498db;
  border: none;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

C

.button {
  background-color: $color-primary;
  border: none;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

D

.button {
  background-color: #3498db;
  border: 1px solid black;
  padding: 1rem 2rem;
  color: white;
  cursor: pointer;
}

💡 Hint

Remember that variables are replaced with their values when compiled.

The mixin uses the variable $color-primary which is #3498db. The mixin sets background-color to that value, so the output CSS uses the hex color code, not the variable name.

🧠 Conceptual

intermediate

Which statement best describes the purpose of mixin libraries in SASS?

Choose the best explanation for why developers use mixin libraries in SASS.

A They compile CSS into binary code for faster browser rendering.

B They automatically convert CSS to JavaScript for dynamic styling.

C They allow reusing groups of CSS declarations with parameters to avoid repetition and improve maintainability.

D They replace all CSS selectors with unique IDs to prevent conflicts.

💡 Hint

Think about how mixins help with writing CSS code.

Mixin libraries group reusable styles that can accept parameters, so you write less code and keep styles consistent.

❓ selector

advanced

What CSS selector is generated by this nested SASS mixin usage?

Given this SASS code, what is the full CSS selector for the nested styles?

@mixin card-style {
  border: 1px solid #ccc;
  padding: 1rem;
  .title {
    font-weight: bold;
  }
}

.article {
  @include card-style;
}

SASS

@mixin card-style {
  border: 1px solid #ccc;
  padding: 1rem;
  .title {
    font-weight: bold;
  }
}

.article {
  @include card-style;
}

A

.article {
  border: 1px solid #ccc;
  padding: 1rem;
}
.article .title {
  font-weight: bold;
}

B

.article {
  border: 1px solid #ccc;
  padding: 1rem;
}
.title {
  font-weight: bold;
}

C

.title {
  font-weight: bold;
}
.article {
  border: 1px solid #ccc;
  padding: 1rem;
}

D

.article.title {
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 1rem;
}

💡 Hint

Nested selectors inside mixins become nested in the output CSS relative to where the mixin is included.

The nested .title inside the mixin becomes .article .title in CSS because the mixin is included inside .article block.

❓ layout

advanced

How does this SASS mixin help with responsive layout?

Examine this mixin and its usage. What is the main layout benefit it provides?

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

SASS

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

A It fixes the container size to 100 pixels width and height.

B It applies a grid layout with three equal columns.

C It hides overflow content inside the container on small screens.

D It centers content horizontally and vertically inside the container, adapting to different screen sizes.

💡 Hint

Think about what flexbox properties do for alignment.

The mixin sets flexbox with center alignment on both axes, so content inside .container is perfectly centered regardless of screen size.

❓ accessibility

expert

Which mixin usage improves accessibility by enhancing focus styles?

Consider these four SASS mixin usages for focus styles. Which one best improves keyboard accessibility by making focus visible and clear?

@mixin focus-style-a {
  outline: none;
}

@mixin focus-style-b {
  outline: 2px solid blue;
  outline-offset: 2px;
}

@mixin focus-style-c {
  border: 1px solid transparent;
}

@mixin focus-style-d {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

SASS

@mixin focus-style-a {
  outline: none;
}

@mixin focus-style-b {
  outline: 2px solid blue;
  outline-offset: 2px;
}

@mixin focus-style-c {
  border: 1px solid transparent;
}

@mixin focus-style-d {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

A Using @include focus-style-b to add a visible blue outline with offset.

B Using @include focus-style-a to remove outlines for a cleaner look.

C Using @include focus-style-c to add a transparent border that does not show on focus.

D Using @include focus-style-d to add a subtle blue glow around focused elements.

💡 Hint

Good focus styles must be visible and distinct for keyboard users.

Removing outlines (A) harms accessibility. Transparent borders (C) do not show focus. Box-shadow (D) can be subtle but may not be as clear as a solid outline. Outline with offset (B) is a recommended accessible focus style.

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