Why mixins eliminate duplication in SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do mixins help reduce duplication in Sass?

Which statement best explains why mixins eliminate duplication in Sass?

A Mixins automatically remove duplicate CSS rules from the final stylesheet.

B Mixins allow you to write reusable blocks of styles that can be included multiple times without rewriting the code.

C Mixins convert Sass code into plain CSS to avoid duplication.

D Mixins prevent the use of variables, reducing repeated values.

💡 Hint

Think about how you can reuse code blocks without copying and pasting.

Mixins let you write a set of CSS rules once and include them wherever needed, so you don't have to write the same styles multiple times.

📝 Syntax

intermediate

Identify the correct mixin usage to avoid duplication

Given this Sass mixin, which option correctly includes it to avoid duplicating border styles?

SASS

@mixin border-style {
  border: 1px solid black;
  border-radius: 5px;
}

A .box { @include border-style; }

B .box { include border-style; }

C .box { @mixin border-style; }

D .box { border-style(); }

💡 Hint

Remember the syntax to include a mixin inside a selector.

To use a mixin, you write '@include mixin-name;' inside the selector block.

❓ rendering

advanced

What CSS output results from this Sass code using mixins?

What is the CSS output of this Sass code?

SASS

@mixin text-style($color) {
  color: $color;
  font-weight: bold;
}

.title {
  @include text-style(red);
}
.subtitle {
  @include text-style(blue);
}

A

.title {
  color: blue;
  font-weight: bold;
}
.subtitle {
  color: red;
  font-weight: bold;
}

B

.title, .subtitle {
  color: red;
  font-weight: bold;
}

C

.title {
  color: $color;
  font-weight: bold;
}
.subtitle {
  color: $color;
  font-weight: bold;
}

D

.title {
  color: red;
  font-weight: bold;
}
.subtitle {
  color: blue;
  font-weight: bold;
}

💡 Hint

Look at how the parameter $color is used in each include.

The mixin applies the color passed as argument and bold font weight to each selector separately.

❓ selector

advanced

How do mixins affect selector duplication in Sass?

Which option shows the correct way to avoid duplicating selectors by using mixins?

SASS

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

A

.btn-primary { @include button-style; }
.btn-secondary { @include button-style; }

B

.btn-primary { padding: 1rem 2rem; background-color: green; color: white; }
.btn-secondary { padding: 1rem 2rem; background-color: green; color: white; }

C .btn-primary, .btn-secondary { @include button-style; }

D @mixin btn { .btn-primary, .btn-secondary { padding: 1rem 2rem; } }

💡 Hint

Think about how to write selectors once and apply styles to both.

Option C combines selectors and includes the mixin once, avoiding duplication of selectors and styles.

❓ accessibility

expert

How can mixins help maintain accessible focus styles without duplication?

Which Sass code using mixins best ensures consistent and accessible focus styles across multiple interactive elements?

A

@mixin focus-style {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.button:focus, .link:focus {
  @include focus-style;
}

B

.button:focus, .link:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

C

.button, .link {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

D

@mixin focus-style {
  outline: none;
}

.button:focus, .link:focus {
  @include focus-style;
}

💡 Hint

Focus styles should be reusable and applied only on focus states.

Using a mixin with focus styles included inside the selectors ensures consistent, accessible focus outlines without repeating code.