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.

Practice

1. What is the main purpose of using @mixin in Sass?

easy

A. To create reusable blocks of CSS code

B. To define variables for colors

C. To import external CSS files

D. To write JavaScript inside Sass

Solution

1. Step 1: Understand what @mixin does

   @mixin is used to write reusable CSS blocks that can be included multiple times.

2. Step 2: Compare options

   Only 'To create reusable blocks of CSS code' correctly describes this purpose. Variables, imports, and JavaScript are unrelated to @mixin.

3. Final Answer:

   To create reusable blocks of CSS code -> Option A

4. Quick Check:

   Mixin = reusable CSS block [OK]

Hint: Mixins bundle CSS to reuse easily [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Assuming mixins run JavaScript

2. Which of the following is the correct syntax to define a mixin named button-style in Sass?

easy

A. @include button-style { color: blue; }

B. @mixin button-style { color: blue; }

C. @mixin: button-style { color: blue; }

D. mixin button-style() { color: blue; }

Solution

1. Step 1: Recall mixin definition syntax

   The correct way to define a mixin is using @mixin name { ... }.

2. Step 2: Check each option

   @mixin button-style { color: blue; } uses @mixin button-style { ... }, which is correct. @include button-style { color: blue; } uses @include which is for using mixins, not defining. Options C and D have invalid syntax.

3. Final Answer:

   @mixin button-style { color: blue; } -> Option B

4. Quick Check:

   Define mixin with @mixin [OK]

Hint: Define mixins with @mixin, use with @include [OK]

Common Mistakes:

• Using @include instead of @mixin to define
• Adding colon after @mixin
• Omitting @ symbol

3. Given the Sass code:

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.button {
  @include box-shadow(2px, 4px, 6px, rgba(0,0,0,0.3));
}

What CSS will be generated for the .button class?

medium

A. .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); }

B. .button { box-shadow: $x $y $blur $color; }

C. .button { box-shadow: 2px, 4px, 6px, rgba(0,0,0,0.3); }

D. Syntax error, no CSS generated

Solution

1. Step 1: Understand mixin parameters and usage

   The mixin box-shadow takes four parameters and sets the CSS box-shadow property using them.

2. Step 2: Substitute parameters in the mixin call

   The call @include box-shadow(2px, 4px, 6px, rgba(0,0,0,0.3)) replaces variables with these values, producing box-shadow: 2px 4px 6px rgba(0,0,0,0.3);.

3. Final Answer:

   .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); } -> Option A

4. Quick Check:

   Mixin parameters replaced correctly [OK]

Hint: Parameters replace variables inside mixins [OK]

Common Mistakes:

• Leaving variables as $x, $y in output
• Using commas instead of spaces in CSS property
• Confusing @mixin and @include usage

4. Identify the error in this Sass code:

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @mixin border-radius(10px);
}

medium

A. Mixin name should be borderRadius without hyphen

B. Missing semicolon after border-radius property

C. Using @mixin instead of @include to apply the mixin

D. Parameters cannot be passed to mixins

Solution

1. Step 1: Check mixin application syntax

   Mixins are defined with @mixin but applied with @include.

2. Step 2: Identify the incorrect usage

   The code uses @mixin border-radius(10px); inside .box, which is wrong. It should be @include border-radius(10px);.

3. Final Answer:

   Using @mixin instead of @include to apply the mixin -> Option C

4. Quick Check:

   Apply mixins with @include [OK]

Hint: Use @include to apply mixins, not @mixin [OK]

Common Mistakes:

• Confusing @mixin and @include
• Thinking parameters are not allowed
• Assuming hyphens are invalid in names

5. You want to create a mixin responsive-text that sets font size differently for small and large screens. Which of these mixin definitions correctly uses parameters and media queries?

hard

A. @mixin responsive-text($size) {
font-size: $size;
@media (min-width: 600px) {
font-size: calc($size * 2);
}
}

B. @mixin responsive-text {
font-size: 12px;
@media (min-width: 600px) {
font-size: 18px;
}
}

C. @mixin responsive-text($small, $large) {
font-size: $small;
@media (max-width: 600px) {
font-size: $large;
}
}

D. @mixin responsive-text($small-size, $large-size) {
font-size: $small-size;
@media (min-width: 600px) {
font-size: $large-size;
}
}

Solution

1. Step 1: Understand the goal

   The mixin should accept two sizes: one for small screens and one for large screens using a media query with min-width 600px.

2. Step 2: Analyze each option

   @mixin responsive-text($small-size, $large-size) { font-size: $small-size; @media (min-width: 600px) { font-size: $large-size; } } correctly defines two parameters and applies font sizes with a media query for screens wider than 600px. @mixin responsive-text { font-size: 12px; @media (min-width: 600px) { font-size: 18px; } } has no parameters, so not flexible. @mixin responsive-text($size) { font-size: $size; @media (min-width: 600px) { font-size: $size * 2; } } tries to multiply a variable inside CSS, which Sass does not support directly without interpolation or calculation. @mixin responsive-text($small, $large) { font-size: $small; @media (max-width: 600px) { font-size: $large; } } uses max-width media query incorrectly for large screens.

3. Final Answer:

   @mixin responsive-text($small-size, $large-size) { font-size: $small-size; @media (min-width: 600px) { font-size: $large-size; } } -> Option D

4. Quick Check:

   Parameters + correct media query = @mixin responsive-text($small-size, $large-size) { font-size: $small-size; @media (min-width: 600px) { font-size: $large-size; } } [OK]

Hint: Use parameters and min-width media query for responsive mixins [OK]

Common Mistakes:

• Not using parameters for flexibility
• Using max-width instead of min-width for large screens
• Trying to do math directly in CSS without Sass functions