Vendor prefix mixin patterns in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named 'border-radius' that accepts one parameter.

SASS

@mixin border-radius([1]) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

A$color

B$radius

C$size

D$width

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name unrelated to radius like $color or $width.

Forgetting the $ sign before the parameter name.

The mixin parameter should be named $radius because it represents the radius value for border-radius.

2fill in blank

medium

Complete the code to include the 'border-radius' mixin with a radius of 10px.

SASS

.box {
  [1] border-radius(10px);
}

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

A@include

B@use

C@import

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@import' or '@use' instead of '@include' to call a mixin.

Forgetting the '@' symbol before 'include'.

To use a mixin in Sass, you use '@include' followed by the mixin name and arguments.

3fill in blank

hard

Fix the error in the mixin to correctly add vendor prefixes for 'transform'.

SASS

@mixin transform([1]) {
  -webkit-transform: $value;
  -ms-transform: $value;
  transform: $value;
}

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

A$transform

Bvalue

C$value

D$transformValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name without $ sign.

Using a different parameter name than the variable inside the mixin.

The parameter must be named $value to match the variable used inside the mixin.

4fill in blank

hard

Fill both blanks to create a mixin 'box-shadow' that adds vendor prefixes and accepts a shadow value.

SASS

@mixin box-shadow([1]) {
  -webkit-box-shadow: $shadow;
  box-shadow: #{$shadow};
}

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

A$shadow

Bshadow

CshadowValue

D$shadowValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names between parameter and property.

Forgetting the $ sign in the parameter.

The mixin parameter is $shadow and the property uses 'shadow' without the $ sign inside the interpolation.

5fill in blank

hard

Fill all three blanks to create a mixin 'transition' that accepts property, duration, and timing function with vendor prefixes.

SASS

@mixin transition([1], [2], [3]) {
  -webkit-transition: $property $duration $timing;
  -moz-transition: $property $duration $timing;
  transition: $property $duration $timing;
}

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

A$property

B$duration

C$timing

D$time

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names like $time instead of $timing.

Missing $ signs in parameter names.

The mixin parameters must match the variables used inside the properties: $property, $duration, and $timing.