Default parameter values in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default color value for the $color parameter.

SASS

@mixin button-style($color: [1]) {
  background-color: $color;
  padding: 1rem;
}

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

Ablue

Byellow

Cred

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using an equals sign (=) instead of a colon (:)

Forgetting to add a default value

Using invalid color names

The default value for $color is set to 'red' using the syntax $color: red.

2fill in blank

medium

Complete the code to set a default font size of 1.2rem for the $size parameter.

SASS

@mixin text-style($size: [1]) {
  font-size: $size;
  font-weight: bold;
}

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

A1.2rem

B2rem

C12px

D1.5em

Attempts:

3 left

💡 Hint

Common Mistakes

Using px instead of rem units

Forgetting the unit

Using an incorrect value like 2rem

The default font size is set to '1.2rem' using the correct unit and syntax.

3fill in blank

hard

Fix the error in the mixin by correctly setting the default value for $padding to 10px.

SASS

@mixin box-style($padding [1] 10px) {
  padding: $padding;
  border: 1px solid black;
}

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

A=>

B=

C==

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' instead of ':'

Using '=>' or '==' which are invalid here

In Sass, default parameter values use a colon (:), not an equals sign (=).

4fill in blank

hard

Fill both blanks to create a mixin with default values for $width and $height parameters.

SASS

@mixin size($width [1] 100px, $height [2] 200px) {
  width: $width;
  height: $height;
}

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

A:

B=

C;

D->

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' instead of ':'

Using semicolons or arrows which are invalid here

Default parameter values in Sass use a colon (:) after the parameter name.

5fill in blank

hard

Fill all three blanks to create a mixin with default values for $color, $margin, and $padding.

SASS

@mixin layout($color [1] blue, $margin [2] 1rem, $padding [3] 0.5rem) {
  background-color: $color;
  margin: $margin;
  padding: $padding;
}

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

A:

B=

C;

D->

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' instead of ':'

Using semicolons or arrows which are invalid here

All default parameter values in Sass mixins use a colon (:) after the parameter name.