Extending vs mixing comparison in SASS - Hands-On Comparison

Extending vs Mixing in Sass: Style Reuse Comparison

📖 Scenario: You are creating a simple webpage with two types of buttons: a primary button and a secondary button. Both buttons share some common styles like padding and font size, but differ in background color and border. You want to reuse the common styles efficiently using Sass.

🎯 Goal: Build Sass code that shows how to reuse common button styles using extend and mixins. You will create a base button style, then create a primary button by extending it, and a secondary button by including a mixin.

📋 What You'll Learn

Create a base button style with padding and font size

Create a primary button style that extends the base button style and adds a blue background

Create a mixin for the base button style

Create a secondary button style that includes the base button mixin and adds a gray background

💡 Why This Matters

🌍 Real World

Web developers often need to reuse styles for buttons or other UI elements to keep code clean and consistent.

💼 Career

Understanding Sass features like @extend and mixins is important for front-end developers to write maintainable and scalable CSS.

1

Create the base button style

Write a Sass style for a class .button-base that sets padding to 1rem 2rem and font-size to 1.2rem.

SASS

// Your code here

Hint

Use a class selector .button-base and add the two properties inside curly braces.

2

Create the primary button style using @extend

Write a Sass style for a class .button-primary that @extends .button-base and sets background-color to blue.

SASS

.button-base {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}

// Your code here

Hint

Use @extend .button-base; inside .button-primary and add the background color property.

3

Create a mixin for the base button style

Write a Sass mixin named button-base-style that sets padding to 1rem 2rem and font-size to 1.2rem.

SASS

.button-base {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}

.button-primary {
  @extend .button-base;
  background-color: blue;
}

// Your code here

Hint

Use @mixin button-base-style { ... } with the same properties as the base button.

4

Create the secondary button style using the mixin

Write a Sass style for a class .button-secondary that @includes the button-base-style mixin and sets background-color to gray.

SASS

.button-base {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}

.button-primary {
  @extend .button-base;
  background-color: blue;
}

@mixin button-base-style {
  padding: 1rem 2rem;
  font-size: 1.2rem;
}

// Your code here

Hint

Use @include button-base-style; inside .button-secondary and add the background color property.

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