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.