Mixin definition with @mixin in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code using a mixin?

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

SASS

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

.box {
  @include center;
  width: 100px;
  height: 100px;
  background-color: red;
}

A

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

B

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

C

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: red;
}

D

.box {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

💡 Hint

Remember that @include inserts the mixin's styles inside the selector.

The @mixin 'center' defines flexbox centering styles. Using @include center inside .box inserts those styles directly into .box, so the final CSS for .box includes all properties.

🧠 Conceptual

intermediate

What does the @mixin directive do in SASS?

Choose the best description of what @mixin does in SASS.

A Creates a new CSS class automatically.

B Defines reusable blocks of styles that can be included in selectors.

C Imports external CSS files into the current stylesheet.

D Defines variables that store color values.

💡 Hint

Think about how you avoid repeating the same styles in multiple places.

@mixin lets you write a group of CSS rules once and reuse them by including the mixin in other selectors with @include.

❓ selector

advanced

Which option correctly uses a mixin with parameters?

Given this mixin definition, which usage will produce a blue border of 2px thickness? @mixin border($color, $width) { border: $width solid $color; }

SASS

@mixin border($color, $width) {
  border: $width solid $color;
}

A

.box {
  @include border(blue, 2px);
}

B

.box {
  @include border(2px, blue);
}

C

.box {
  @include border(blue);
}

D

.box {
  @include border($color: blue);
}

💡 Hint

Parameters are passed in the order they are defined unless named.

The mixin expects color first, then width. Option A passes blue as color and 2px as width, producing 'border: 2px solid blue;'.

❓ layout

advanced

What visual layout will this SASS code produce?

Consider this SASS code using a mixin for grid layout: @mixin grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .container { @include grid-layout; background-color: lightgray; padding: 1rem; } What will the .container look like in the browser?

SASS

@mixin grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.container {
  @include grid-layout;
  background-color: lightgray;
  padding: 1rem;
}

A A container with grid layout but no gaps and no background color.

B A container with a single column and no gaps, white background, and no padding.

C A container with flex layout and items centered horizontally and vertically.

D A container with three equal columns spaced evenly with gaps, light gray background, and padding.

💡 Hint

The mixin sets a grid with 3 equal columns and gaps.

The mixin applies grid display with 3 equal columns and 1rem gaps. The container also has a light gray background and 1rem padding, so visually it is a grid with spacing and background.

❓ accessibility

expert

How can a mixin help improve accessibility in CSS?

Which of these mixin usages best helps maintain accessible focus styles across a website?

A

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

.button {
  @include focus-style;
}

B

@mixin focus-style {
  display: none;
}

.button {
  @include focus-style;
}

C

@mixin focus-style {
  color: transparent;
}

.button {
  @include focus-style;
}

D

@mixin focus-style {
  background-color: white;
}

.button {
  @include focus-style;
}

💡 Hint

Accessible focus styles help keyboard users see which element is focused.

Option A defines a visible outline for focus states, improving keyboard navigation accessibility. Other options hide or obscure focus, which is harmful.