Including mixins with @include in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the mixin named 'center-content' inside the '.box' class.

SASS

.box {
  [1] center-content;
}

Drag options to blanks, or click blank then click option'

A@import

B@mixin

C@extend

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@mixin' instead of '@include' to apply a mixin.

Using '@extend' which is for inheritance, not mixins.

Use '@include' to apply a mixin inside a selector in Sass.

2fill in blank

medium

Complete the code to include the mixin 'button-style' with parentheses inside '.btn'.

SASS

.btn {
  [1] button-style();
}

Drag options to blanks, or click blank then click option'

A@extend

B@include

C@mixin

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses when including a mixin that expects them.

Using '@mixin' which defines, not includes.

Use '@include' with parentheses to include a mixin, even if it has no parameters.

3fill in blank

hard

Fix the error in including the mixin 'shadow' inside '.card'.

SASS

.card {
  [1] shadow;
}

Drag options to blanks, or click blank then click option'

A@mixin

Binclude

C@include

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'include' without '@'.

Using '@mixin' which defines a mixin, not includes it.

The correct way to include a mixin is '@include' followed by the mixin name.

4fill in blank

hard

Fill both blanks to include the mixin 'flex-center' with a parameter 'column' inside '.container'.

SASS

.container {
  [1] flex-center([2]);
}

Drag options to blanks, or click blank then click option'

A@include

Brow

Ccolumn

D@mixin

Attempts:

3 left

💡 Hint

Common Mistakes

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

Passing 'row' instead of 'column' as the parameter.

Use '@include' to include the mixin and pass 'column' as the parameter inside parentheses.

5fill in blank

hard

Fill all three blanks to include the mixin 'text-style' with parameters 'italic' and 'bold' inside '.title'.

SASS

.title {
  [1] text-style([2], [3]);
}

Drag options to blanks, or click blank then click option'

A@mixin

Bitalic

Cbold

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@mixin' instead of '@include' to include the mixin.

Swapping the order of parameters or missing the comma.

Use '@include' to apply the mixin and pass 'italic' and 'bold' as parameters inside parentheses separated by a comma.

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