Including mixins with @include in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the Sass code below, what CSS will be generated after compilation?

SASS

@mixin fancy-text {
  color: red;
  font-weight: bold;
}

.title {
  @include fancy-text;
  font-size: 2rem;
}

A

.title {
  color: red;
  font-weight: bold;
  font-size: 2rem;
}

B

.title {
  font-size: 2rem;
}

.fancy-text {
  color: red;
  font-weight: bold;
}

C

.fancy-text {
  color: red;
  font-weight: bold;
}

.title {
  font-size: 2rem;
}

D

.title {
  color: red;
  font-size: 2rem;
}

💡 Hint

Remember that @include inserts the mixin's styles inside the selector where it is called.

The @include directive copies the mixin's CSS properties inside the .title selector. So the final CSS has color, font-weight, and font-size all inside .title.

🧠 Conceptual

intermediate

What happens if you include a mixin with parameters incorrectly?

Consider this mixin with a parameter: @mixin box-shadow($shadow) { box-shadow: $shadow; } Which option will cause an error when including this mixin?

A

.card {
  @include box-shadow;
}

B

.card {
  @include box-shadow(2px 2px 5px gray);
}

C

.card {
  @include box-shadow('2px 2px 5px gray');
}

D

.card {
  @include box-shadow($shadow: 2px 2px 5px gray);
}

💡 Hint

Mixins with parameters require you to pass arguments when including.

Option A calls the mixin without passing the required parameter, causing a compilation error. The other options correctly pass the parameter either positionally or by name.

❓ selector

advanced

Which option correctly includes a mixin inside a nested selector?

Given this Sass code, which option produces the correct CSS output?

SASS

@mixin highlight {
  background-color: yellow;
}

.article {
  p {
    @include highlight;
  }
}

A

.article {
  p {
    background-color: yellow;
  }
}

B

.article p {
  background-color: yellow;
}

C

p {
  background-color: yellow;
}

D

.highlight {
  background-color: yellow;
}

💡 Hint

Nested selectors in Sass compile to combined selectors in CSS.

The nested p inside .article with the included mixin compiles to .article p with the background-color style. Option B matches this output exactly.

❓ layout

advanced

How does including a mixin affect layout styles in this example?

Look at this Sass code with a mixin for flexbox layout: @mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; height: 10rem; } What will the container look like in the browser?

A A box with no height and content centered horizontally only.

B A box 10rem tall with content aligned to the left and top by default.

C A box 10rem tall with content centered horizontally and vertically using flexbox.

D A box 10rem tall with content stacked vertically but not centered.

💡 Hint

Flexbox with justify-content and align-items set to center centers content both ways.

The mixin sets display:flex and centers content horizontally and vertically. The container has height 10rem, so content is perfectly centered inside that box.

❓ accessibility

expert

Which mixin inclusion best supports accessible focus styles?

You have this mixin for focus styles: @mixin focus-ring { outline: 3px solid blue; outline-offset: 2px; } Which option correctly includes this mixin to improve keyboard accessibility on buttons?

A

button:hover {
  @include focus-ring;
}

B

button {
  @include focus-ring;
}

C

button:active {
  @include focus-ring;
}

D

button:focus {
  @include focus-ring;
}

💡 Hint

Focus styles should apply only when the element receives keyboard focus.

Option D applies the focus-ring styles only when the button is focused, which helps keyboard users see where focus is. Other options apply styles on hover or active states, which do not help keyboard navigation.