Extending vs mixing comparison in SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base button style.

SASS

.btn-primary {
  @extend [1];
  background-color: blue;
  color: white;
}

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

A.btn-base

B.btn-primary

C@mixin btn-base

D#btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Using @mixin name with @extend instead of selector.

Including '#' or other symbols in the selector name.

The @extend directive uses a selector like '.btn-base' to inherit styles.

2fill in blank

medium

Complete the code to include the button mixin.

SASS

.btn-secondary {
  [1] btn-base;
  background-color: gray;
  color: black;
}

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

A@extend

B@mixin

C@include

D@use

Attempts:

3 left

💡 Hint

Common Mistakes

Using @extend instead of @include for mixins.

Confusing @mixin declaration with usage.

The @include directive is used to insert mixin styles into a selector.

3fill in blank

hard

Fix the error in the code to properly extend the base card style.

SASS

.card-special {
  @extend [1];
  border-color: red;
}

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

A#card-base

B.card-base

C@mixin card-base

Dcard-base

Attempts:

3 left

💡 Hint

Common Mistakes

Using ID selector (#card-base) with @extend.

Using mixin name instead of selector.

The @extend directive requires a class selector like '.card-base' to work correctly.

4fill in blank

hard

Fill both blanks to create a mixin and include it in a class.

SASS

@mixin [1] {
  padding: 1rem;
  border-radius: 0.5rem;
}

.card-rounded {
  [2] [1];
  background-color: white;
}

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

Arounded-style

B@include

C@extend

Dcard-rounded

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@extend' instead of '@include' to use a mixin.

Mismatching mixin name between definition and usage.

Define the mixin named 'rounded-style' and include it with '@include rounded-style'.

5fill in blank

hard

Fill all three blanks to create a reusable button style with parameters and include it.

SASS

@mixin [1]($bg-color, $text-color) {
  background-color: [2];
  color: [3];
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
}

.btn-custom {
  @include [1](green, white);
}

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

Abutton-style

B$bg-color

C$text-color

Dbtn-custom

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names inside the mixin body.

Forgetting to use parameters for colors.

Define mixin 'button-style' with parameters $bg-color and $text-color, then use them inside the mixin.

Practice

1. What is the main difference between @extend and @mixin in Sass?

easy

A. @extend shares styles by combining selectors, @mixin copies styles into selectors.

B. @extend copies styles into selectors, @mixin combines selectors.

C. @extend creates new CSS files, @mixin deletes unused styles.

D. @extend is used only for variables, @mixin is used only for functions.

Solution

1. Step 1: Understand @extend behavior

   @extend merges selectors that share the same styles, reducing CSS size by combining rules.

2. Step 2: Understand @mixin behavior

   @mixin copies the style block wherever it is included, allowing flexible reuse but increasing CSS size.

3. Final Answer:

   @extend shares styles by combining selectors, @mixin copies styles into selectors. -> Option A

4. Quick Check:

   @extend combines, @mixin copies [OK]

Hint: Remember: extend merges selectors, mixin copies styles [OK]

Common Mistakes:

• Confusing which one copies vs combines styles
• Thinking @extend creates new CSS files
• Believing @mixin deletes unused styles

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

easy

A. @extend button-style;

B. @include button-style;

C. @mixin button-style;

D. @use button-style;

Solution

1. Step 1: Recall mixin inclusion syntax

   To use a mixin, Sass requires @include mixin-name; syntax.

2. Step 2: Differentiate from other directives

   @extend is for extending selectors, @mixin defines mixins, and @use imports modules.

3. Final Answer:

   @include button-style; -> Option B

4. Quick Check:

   Use @include to add mixins [OK]

Hint: Use @include to add mixins, not @extend or @mixin [OK]

Common Mistakes:

• Using @extend instead of @include for mixins
• Confusing @mixin (definition) with @include (usage)
• Using @use for mixins instead of modules

3. Given the Sass code:

@mixin red-text { color: red; }
.button { @include red-text; }

What CSS will be generated?

medium

A. .button, .red-text { color: red; }

B. Error: mixin not extended

C. .red-text { color: red; }

D. .button { color: red; }

Solution

1. Step 1: Understand mixin inclusion

   The mixin red-text defines color: red;. Including it copies this style into .button.

2. Step 2: Check generated CSS

   The CSS will have .button { color: red; } because the mixin's styles are copied inside the selector.

3. Final Answer:

   .button { color: red; } -> Option D

4. Quick Check:

   Mixin copies styles inside selector [OK]

Hint: Mixins copy styles inside selectors, no selector merging [OK]

Common Mistakes:

• Expecting selectors to merge like @extend
• Thinking mixin creates separate class
• Assuming syntax error without @extend

4. Identify the error in this Sass code:

.alert { color: red; }
.error { @extend .alert; }
.error { background: yellow; }

medium

A. No error; code compiles and merges selectors.

B. Error: Cannot extend a class defined after the extend.

C. Error: Duplicate selector .error is not allowed.

D. Error: @extend cannot be used inside .error selector.

Solution

1. Step 1: Check @extend usage

   @extend merges selectors with the same styles. Extending .alert inside .error is valid.

2. Step 2: Confirm multiple declarations for .error

   Multiple declarations for .error are allowed and combined in CSS output.

3. Final Answer:

   No error; code compiles and merges selectors. -> Option A

4. Quick Check:

   @extend merges selectors, multiple declarations allowed [OK]

Hint: Multiple declarations allowed; @extend merges selectors [OK]

Common Mistakes:

• Thinking duplicate selectors cause errors
• Believing @extend must come before class definition
• Assuming @extend cannot be inside selector

5. You want to create a reusable button style that can be customized with different colors without duplicating CSS selectors. Which approach is best?

hard

A. Use @extend to share base button styles and override colors separately.

B. Use @extend with color parameters inside the mixin.

C. Use @mixin with a color parameter to copy styles with different colors.

D. Use plain CSS classes without Sass features for flexibility.

Solution

1. Step 1: Understand the need for customization

   Customizing colors requires flexibility to pass different values for each button.

2. Step 2: Compare @extend and @mixin for this use case

   @extend merges selectors but cannot accept parameters. @mixin can accept parameters to customize styles.

3. Step 3: Choose the best approach

   Using a @mixin with a color parameter copies styles with different colors without duplicating selectors.

4. Final Answer:

   Use @mixin with a color parameter to copy styles with different colors. -> Option C

5. Quick Check:

   Mixins with parameters allow flexible style reuse [OK]

Hint: Use mixins with parameters for customizable reusable styles [OK]

Common Mistakes:

• Trying to pass parameters to @extend (not supported)
• Using @extend which merges selectors but lacks flexibility
• Avoiding Sass features and writing repetitive CSS