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.

Practice

1. What is the main purpose of default parameter values in Sass mixins or functions?

easy

A. To force users to always pass arguments

B. To make the code run faster

C. To provide fallback values if no argument is given

D. To create new CSS properties automatically

Solution

1. Step 1: Understand default parameters

   Default parameters give a value when no argument is passed to a mixin or function.

2. Step 2: Identify the purpose

   This helps avoid errors and makes code flexible by using fallback values.

3. Final Answer:

   To provide fallback values if no argument is given -> Option C

4. Quick Check:

   Default parameters = fallback values [OK]

Hint: Defaults fill in missing arguments automatically [OK]

Common Mistakes:

• Thinking defaults speed up code
• Believing defaults force argument passing
• Confusing defaults with CSS property creation

2. Which of the following is the correct syntax to set a default parameter value in a Sass mixin?

easy

A. @mixin example($color = blue) { color: $color; }

B. @mixin example($color: blue) { color: $color; }

C. @mixin example($color ? blue) { color: $color; }

D. @mixin example($color <- blue) { color: $color; }

Solution

1. Step 1: Recall Sass default parameter syntax

   In Sass, default values use a colon ':' after the parameter name.

2. Step 2: Match syntax to options

   @mixin example($color: blue) { color: $color; } uses '$color: blue' which is correct syntax for default values.

3. Final Answer:

   @mixin example($color: blue) { color: $color; } -> Option B

4. Quick Check:

   Default value syntax uses ':' not '=' [OK]

Hint: Use colon ':' to assign default values in parameters [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using '?' or '<-' which are invalid
• Confusing default syntax with other languages

3. Given the Sass mixin:

@mixin box($width: 100px, $height: 50px) { width: $width; height: $height; }

What CSS is generated by:

.small { @include box($height: 30px); }

medium

A. .small { width: 100px; height: 30px; }

B. .small { width: 30px; height: 30px; }

C. .small { width: 100px; height: 50px; }

D. .small { width: 30px; height: 50px; }

Solution

1. Step 1: Identify passed and default parameters

   The mixin call passes only $height: 30px, so $width uses default 100px.

2. Step 2: Write resulting CSS

   Width is 100px (default), height is 30px (passed value).

3. Final Answer:

   .small { width: 100px; height: 30px; } -> Option A

4. Quick Check:

   Passed overrides height, width uses default [OK]

Hint: Passed args override defaults, others stay default [OK]

Common Mistakes:

• Assuming all defaults are overridden
• Mixing up which parameter was passed
• Forgetting default applies if argument missing

4. What is wrong with this Sass mixin?

@mixin card($bg-color blue) { background-color: $bg-color; }

medium

A. Missing colon ':' between parameter and default value

B. Using '=' instead of ':' for default value

C. Parameter name cannot start with '$'

D. Mixin name cannot be 'card'

Solution

1. Step 1: Check parameter default syntax

   The parameter $bg-color is followed by 'blue' without a colon ':' separator.

2. Step 2: Identify correct syntax

   Default values require a colon ':' like '$bg-color: blue'.

3. Final Answer:

   Missing colon ':' between parameter and default value -> Option A

4. Quick Check:

   Default parameter syntax needs ':' [OK]

Hint: Default values need ':' after parameter name [OK]

Common Mistakes:

• Omitting colon ':' between parameter and value
• Using '=' instead of ':'
• Thinking parameter names can't start with '$'

5. You want a Sass function that returns a color, defaulting to red if no argument is given. Which function correctly uses default parameter values and returns the color?

hard

A. @function get-color($color = red) { @return $color; }

B. @function get-color($color: red) { return $color; }

C. @function get-color($color) { @return $color or red; }

D. @function get-color($color: red) { @return $color; }

Solution

1. Step 1: Check default parameter syntax in functions

   Default values use colon ':' like '$color: red'.

2. Step 2: Verify return statement syntax

   Sass uses '@return' to return values, not 'return'.

3. Step 3: Compare options

   @function get-color($color: red) { @return $color; } uses correct default and '@return'. @function get-color($color: red) { return $color; } uses 'return' which is invalid in Sass.

4. Final Answer:

   @function get-color($color: red) { @return $color; } -> Option D

5. Quick Check:

   Default param ':' and '@return' needed [OK]

Hint: Use ':' for defaults and '@return' to output value [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using 'return' instead of '@return'
• Trying to use 'or' inside return statement