Mixins with parameters in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named 'box' that takes one parameter.

SASS

@mixin box([1]) {
  width: 100px;
  height: 100px;
  background-color: red;
}

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

A$color

B$width

C$size

D$height

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dollar sign before the parameter name.

Using a parameter name unrelated to the mixin purpose.

The mixin 'box' takes one parameter named $size, which can be used inside the mixin.

2fill in blank

medium

Complete the code to use the parameter $color inside the mixin to set background color.

SASS

@mixin colored-box($color) {
  width: 100px;
  height: 100px;
  background-color: [1];
}

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

A$color

Bcolor

Cbackground

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using the parameter name without the dollar sign.

Using a fixed color instead of the parameter.

Inside the mixin, use the parameter $color to set the background-color property.

3fill in blank

hard

Fix the error in the mixin call to pass the color parameter correctly.

SASS

.box {
  @include colored-box([1]);
}

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

A'blue'

B$blue

C#blue

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the color with a dollar sign, which is for variables only.

Passing the color as a string with quotes.

When calling a mixin, pass the color value without a dollar sign or quotes if it's a color name.

4fill in blank

hard

Fill both blanks to create a mixin that sets width and height using parameters.

SASS

@mixin size-box([1], [2]) {
  width: [1];
  height: [2];
}

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

A$width

B$height

C$size

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same parameter for both width and height.

Forgetting the dollar sign in parameter names.

The mixin takes two parameters $width and $height to set the width and height properties.

5fill in blank

hard

Fill all three blanks to create a mixin that sets border width, style, and color.

SASS

@mixin border-style([1], [2], [3]) {
  border-width: [1];
  border-style: [2];
  border-color: [3];
}

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

A$width

B$style

C$color

D$border

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names that don't match border properties.

Mixing up the order of parameters.

The mixin uses three parameters $width, $style, and $color to set border properties.

Practice

1. What is the main purpose of using @mixin with parameters in Sass?

easy

A. To create reusable styles that can be customized with different values

B. To define variables that store colors and fonts

C. To import external CSS files into Sass

D. To write plain CSS without any dynamic features

Solution

1. Step 1: Understand what @mixin does

   @mixin lets you write a block of styles once and reuse it multiple times.

2. Step 2: Recognize the role of parameters

   Parameters allow you to customize the reused styles by passing different values when including the mixin.

3. Final Answer:

   To create reusable styles that can be customized with different values -> Option A

4. Quick Check:

   Mixins with parameters = reusable customizable styles [OK]

Hint: Mixins reuse styles; parameters customize them [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Believing mixins are plain CSS blocks

2. Which of the following is the correct syntax to define a mixin with a parameter named color?

easy

A. @mixin button($color) { color: $color; }

B. @mixin button { color: color; }

C. @mixin button(color) { color: color; }

D. @mixin button[$color] { color: $color; }

Solution

1. Step 1: Check the mixin declaration syntax

   The correct way to declare a mixin with parameters uses parentheses and a dollar sign before the parameter name.

2. Step 2: Verify the parameter usage inside the mixin

   The parameter $color must be used with a dollar sign to refer to its value.

3. Final Answer:

   @mixin button($color) { color: $color; } -> Option A

4. Quick Check:

   Mixin params use ($param) and $param inside [OK]

Hint: Parameters need $ and parentheses in @mixin [OK]

Common Mistakes:

• Omitting $ before parameter name
• Using square brackets instead of parentheses
• Not using $ when referencing parameter inside mixin

3. Given the Sass code:

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.button {
  @include box-shadow(2px, 4px, 6px, rgba(0,0,0,0.3));
}

What CSS will be generated for the .button class?

medium

A. .button { box-shadow: 2px, 4px, 6px, rgba(0,0,0,0.3); }

B. .button { box-shadow: $x $y $blur $color; }

C. .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); }

D. .button { box-shadow: 2 4 6 rgba(0,0,0,0.3); }

Solution

1. Step 1: Understand mixin parameter substitution

   The mixin replaces each parameter with the passed value when included.

2. Step 2: Check the CSS output format

   The values are inserted without commas, matching CSS syntax for box-shadow.

3. Final Answer:

   .button { box-shadow: 2px 4px 6px rgba(0,0,0,0.3); } -> Option C

4. Quick Check:

   Mixin params replaced correctly in CSS [OK]

Hint: Mixin params replace placeholders without commas [OK]

Common Mistakes:

• Leaving parameter names as literals in output
• Adding commas between values in CSS
• Omitting units like px

4. Identify the error in this Sass code:

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

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

medium

A. Parameters cannot have units like px

B. Incorrect mixin name

C. Wrong syntax for @include

D. Missing $ before radius inside mixin

Solution

1. Step 1: Check parameter usage inside mixin

   The parameter $radius must be referenced with a dollar sign inside the mixin body.

2. Step 2: Identify the error in property value

   The code uses radius without $, so it is treated as a literal string, causing wrong CSS.

3. Final Answer:

   Missing $ before radius inside mixin -> Option D

4. Quick Check:

   Parameter references need $ inside mixin [OK]

Hint: Always use $ when referencing parameters inside mixin [OK]

Common Mistakes:

• Forgetting $ before parameter names
• Misusing @include syntax
• Thinking units are not allowed in parameters

5. You want to create a mixin responsive-text that sets font size differently for mobile and desktop. It takes two parameters: $mobile-size and $desktop-size. Which Sass code correctly applies the font sizes using a media query inside the mixin?

hard

A. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $desktop-size;
@media (max-width: 768px) {
font-size: $mobile-size;
}
}

B. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $mobile-size;
@media (min-width: 768px) {
font-size: $desktop-size;
}
}

C. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $mobile-size;
@media (max-width: 768px) {
font-size: $desktop-size;
}
}

D. @mixin responsive-text($mobile-size, $desktop-size) {
font-size: $desktop-size;
@media (min-width: 768px) {
font-size: $mobile-size;
}
}

Solution

1. Step 1: Understand mobile-first approach

   Set the base font size for mobile first, then override for larger screens using min-width media query.

2. Step 2: Check parameter usage and media query logic

   The mixin sets font-size: $mobile-size; outside media query, then inside @media (min-width: 768px) sets font-size: $desktop-size;.

3. Final Answer:

   @mixin responsive-text($mobile-size, $desktop-size) { font-size: $mobile-size; @media (min-width: 768px) { font-size: $desktop-size; } } -> Option B

4. Quick Check:

   Mobile first base, desktop override with min-width [OK]

Hint: Mobile first: base size outside, desktop inside min-width [OK]

Common Mistakes:

• Using max-width instead of min-width for desktop
• Swapping mobile and desktop sizes
• Placing media query outside mixin