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.

Practice

1. What does the @include directive do in Sass?

easy

A. It inserts the styles defined in a mixin into the current selector.

B. It defines a new mixin with reusable styles.

C. It imports another Sass file into the current file.

D. It creates a variable to store a color or value.

Solution

1. Step 1: Understand the role of @include

   The @include directive is used to add the styles from a mixin into a selector.

2. Step 2: Differentiate from other Sass features

   Defining mixins uses @mixin, importing files uses @import, and variables use $ syntax.

3. Final Answer:

   It inserts the styles defined in a mixin into the current selector. -> Option A

4. Quick Check:

   @include adds mixin styles [OK]

Hint: Remember: @include adds mixin styles inside selectors [OK]

Common Mistakes:

• Confusing @include with @mixin which defines mixins
• Thinking @include imports files
• Mixing up variables with mixins

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

easy

A. @include button-style();

B. @mixin button-style();

C. @include button-style;

D. @use button-style();

Solution

1. Step 1: Recall the syntax for including mixins

   The correct syntax to include a mixin is @include mixin-name(); with parentheses even if no arguments are passed.

2. Step 2: Eliminate incorrect options

   @mixin defines a mixin, not includes it. @use is for modules. Omitting parentheses is invalid syntax.

3. Final Answer:

   @include button-style(); -> Option A

4. Quick Check:

   Include mixin with @include name() [OK]

Hint: Use @include mixinName() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses after mixin name
• Using @mixin instead of @include to call mixin
• Confusing @use with @include

3. Given the Sass code:

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

.box {
  @include border-radius(10px);
  background: blue;
}

What CSS will this produce?

medium

A. .box { border-radius: 10; background: blue; }

B. .box { border-radius: $radius; background: blue; }

C. .box { border-radius: 10px; background: blue; }

D. .box { background: blue; }

Solution

1. Step 1: Understand mixin with argument

   The mixin border-radius takes a parameter $radius and sets border-radius to that value.

2. Step 2: Apply mixin with 10px argument

   Including @include border-radius(10px); replaces $radius with 10px in the output CSS.

3. Final Answer:

   .box { border-radius: 10px; background: blue; } -> Option C

4. Quick Check:

   Mixin argument replaces variable in output [OK]

Hint: Mixin arguments replace variables inside mixin [OK]

Common Mistakes:

• Leaving variable name $radius in output CSS
• Omitting units like px in argument
• Ignoring mixin styles in output

4. Identify the error in this Sass code:

@mixin text-style {
  font-size: 1.2rem;
  color: black;
}

.title {
  @include text-style;
  font-weight: bold;
}

medium

A. Cannot use @include inside a selector.

B. Mixin should be defined with parentheses even if no arguments.

C. Mixin name should start with $ sign.

D. Missing parentheses after mixin name in @include.

Solution

1. Step 1: Check @include syntax

   When including a mixin, parentheses are required even if no arguments are passed.

2. Step 2: Verify other parts

   Mixin definition without parentheses is allowed if no arguments. Mixin names do not start with $. @include is valid inside selectors.

3. Final Answer:

   Missing parentheses after mixin name in @include. -> Option D

4. Quick Check:

   @include needs parentheses even if empty [OK]

Hint: Always add () after mixin name in @include [OK]

Common Mistakes:

• Omitting parentheses in @include
• Thinking mixin names start with $
• Believing @include can't be inside selectors

5. You want to create a reusable mixin card that sets a white background, shadow, and border radius. You also want to customize the border radius when including it. Which Sass code correctly defines and uses this mixin?

hard

A. @mixin card {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

B. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

C. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 1rem;
}

.container {
@include card;
}

D. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card;
}

Solution

1. Step 1: Define mixin with parameter for border radius

   The mixin card must accept $radius to customize border radius.

2. Step 2: Include mixin with argument

   When including, pass the desired radius value like @include card(1rem);.

3. Step 3: Check other options for errors

   @mixin card { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } uses $radius without parameter, causing error. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 1rem; } .container { @include card; } hardcodes radius and omits parentheses in include. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card; } omits argument when including.

4. Final Answer:

   @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } -> Option B

5. Quick Check:

   Define mixin with param, include with argument [OK]

Hint: Define mixin params and pass args in @include [OK]

Common Mistakes:

• Using variables inside mixin without parameters
• Forgetting parentheses in @include
• Not passing required arguments when including