Theming with mixins 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?

$primary-color: #3498db;
@mixin theme-colors($color) {
  background-color: $color;
  color: white;
}
.button {
  @include theme-colors($primary-color);
}

SASS

$primary-color: #3498db;
@mixin theme-colors($color) {
  background-color: $color;
  color: white;
}
.button {
  @include theme-colors($primary-color);
}

A

.button {
  background-color: blue;
  color: white;
}

B

.button {
  background-color: $primary-color;
  color: white;
}

C

.button {
  background-color: #3498db;
  color: white;
}

D

.button {
  background-color: #000000;
  color: white;
}

💡 Hint

Remember that SASS variables are replaced with their values when compiled.

The mixin uses the variable $primary-color which is set to #3498db. When included, the CSS output replaces the variable with its value.

🧠 Conceptual

intermediate

Which option correctly explains the purpose of mixins in theming?

Why do developers use mixins when creating themes in SASS?

A To reuse a set of CSS properties with different values easily across multiple selectors.

B To create new HTML elements dynamically in the stylesheet.

C To store JavaScript functions inside SASS files.

D To automatically minify CSS files during compilation.

💡 Hint

Think about how mixins help avoid repeating code.

Mixins allow you to write reusable blocks of CSS that can accept parameters, making it easy to apply consistent styles with variations.

❓ selector

advanced

What CSS selector is generated by this SASS code using a mixin?

Consider this SASS code:

@mixin theme-button($bg-color) {
  background-color: $bg-color;
  border: none;
  padding: 1rem;
}
.primary {
  @include theme-button(#007bff);
}
.primary:hover {
  background-color: darken(#007bff, 10%);
}

What is the correct CSS selector for the hover style?

SASS

@mixin theme-button($bg-color) {
  background-color: $bg-color;
  border: none;
  padding: 1rem;
}
.primary {
  @include theme-button(#007bff);
}
.primary:hover {
  background-color: darken(#007bff, 10%);
}

A .primary :hover

B .primary:hovered

C :hover.primary

D .primary:hover

💡 Hint

Remember how CSS pseudo-classes are written.

The hover pseudo-class is attached directly to the element's class with no space, so '.primary:hover' is correct.

❓ layout

advanced

How does using a theming mixin affect layout consistency?

If a mixin sets padding and margin for buttons in a theme, what is the main benefit for layout?

A It changes button sizes randomly to create a dynamic layout.

B It ensures all buttons have consistent spacing, improving visual alignment across the site.

C It disables all margins and paddings for buttons to save space.

D It automatically centers all buttons horizontally on the page.

💡 Hint

Think about how consistent spacing affects design.

Using mixins to set padding and margin ensures uniform spacing, which helps keep the layout neat and balanced.

❓ accessibility

expert

Which mixin usage best supports accessible theming for color contrast?

You want to create a mixin that sets background and text colors ensuring good contrast for readability. Which SASS mixin usage below best supports accessibility?

SASS

@mixin accessible-theme($bg, $text) {
  background-color: $bg;
  color: $text;
  @if (contrast($bg, $text) < 4.5) {
    color: adjust-color($text, $lightness: 50%);
  }
}

A @include accessible-theme(#000000, #ffffff);

B @include accessible-theme(#ffffff, #eeeeee);

C @include accessible-theme(#123456, #123456);

D @include accessible-theme(#ff0000, #ff0000);

💡 Hint

Good contrast means text stands out clearly from background.

Option A uses black background and white text, which has excellent contrast and is accessible. Other options have poor or no contrast.