Including mixins with @include in SASS - Mini Project: Build & Apply

Using Mixins with @include in Sass

📖 Scenario: You are creating a simple webpage style where multiple buttons share common styles. To avoid repeating code, you will use a Sass mixin and include it in different button classes.

🎯 Goal: Build a Sass stylesheet that defines a mixin called button-style with specific styles, then include this mixin in two button classes: .primary-button and .secondary-button.

📋 What You'll Learn

Create a mixin named button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-weight to bold.

Create a class .primary-button that includes the button-style mixin and sets background-color to #007bff and color to white.

Create a class .secondary-button that includes the button-style mixin and sets background-color to #6c757d and color to white.

Use the @include directive to include the mixin inside the button classes.

💡 Why This Matters

🌍 Real World

Mixins help keep CSS code clean and reusable, especially when many elements share similar styles like buttons.

💼 Career

Knowing how to use Sass mixins is valuable for front-end developers to write maintainable and scalable stylesheets.

1

Create the button-style mixin

Write a Sass mixin named button-style that sets padding to 1rem 2rem, border-radius to 0.5rem, and font-weight to bold.

SASS

// Define the button-style mixin here
// Your code here

Hint

Use @mixin button-style { ... } to define the mixin with the given styles inside.

2

Create the .primary-button class and include the mixin

Create a Sass class selector .primary-button that uses @include button-style to add the mixin styles, then set background-color to #007bff and color to white.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

// Create .primary-button class and include button-style mixin
// Your code here

Hint

Use .primary-button { @include button-style; background-color: #007bff; color: white; }.

3

Create the .secondary-button class and include the mixin

Create a Sass class selector .secondary-button that uses @include button-style to add the mixin styles, then set background-color to #6c757d and color to white.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.primary-button {
  @include button-style;
  background-color: #007bff;
  color: white;
}

// Create .secondary-button class and include button-style mixin
// Your code here

Hint

Use .secondary-button { @include button-style; background-color: #6c757d; color: white; }.

4

Add a hover effect to both buttons using the mixin

Add a hover style for both .primary-button and .secondary-button that changes the opacity to 0.8. Use the &:hover selector inside each button class.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.primary-button {
  @include button-style;
  background-color: #007bff;
  color: white;
  // Add hover effect here
}

.secondary-button {
  @include button-style;
  background-color: #6c757d;
  color: white;
  // Add hover effect here
}

Hint

Inside each button class, add &:hover { opacity: 0.8; } to create the hover effect.

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