Default parameter values in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code with default parameter?

Consider this SASS function with a default parameter. What CSS color will the .box class have?

SASS

@function set-color($color: blue) {
  @return $color;
}

.box {
  color: set-color();
}

A

.box {
  color: blue;
}

B

.box {
  color: null;
}

C

.box {
  color: $color;
}

D

.box {
  color: black;
}

💡 Hint

If no argument is given, the default value is used.

The function uses the default parameter value 'blue' when no argument is passed, so the color is blue.

🧠 Conceptual

intermediate

What happens if you override a default parameter in a mixin?

Given this mixin with a default parameter, what color will the .alert class have?

SASS

@mixin alert-color($color: red) {
  color: $color;
}

.alert {
  @include alert-color(green);
}

A

.alert {
  color: red;
}

B

.alert {
  color: green;
}

C

.alert {
  color: null;
}

D

.alert {
  color: $color;
}

💡 Hint

Passing an argument overrides the default value.

The mixin uses the passed argument 'green' instead of the default 'red', so the color is green.

❓ rendering

advanced

What is the rendered CSS output of this nested mixin with default parameters?

Analyze this SASS code with nested mixins and default parameters. What CSS will be generated for .card?

SASS

@mixin border-style($width: 1px, $color: black) {
  border: $width solid $color;
}

@mixin card-style($border-width: 2px) {
  @include border-style($border-width);
  padding: 1rem;
}

.card {
  @include card-style();
}

A

.card {
  border: 1px solid 1px;
  padding: 1rem;
}

B

.card {
  border: 1px solid black;
  padding: 1rem;
}

C

.card {
  border: 2px solid black;
  padding: 1rem;
}

D

.card {
  border: 2px solid 2px;
  padding: 1rem;
}

💡 Hint

The outer mixin overrides the first default parameter but not the second.

The card-style mixin passes 2px as the first argument to border-style, so border width is 2px and color uses default black.

❓ selector

advanced

Which option shows the correct CSS output for this SASS function with default parameter and conditional?

This SASS function returns a font size based on a parameter with a default. What CSS will h1 have?

SASS

@function font-size($level: 3) {
  @if $level == 1 {
    @return 2rem;
  } @else if $level == 2 {
    @return 1.5rem;
  } @else {
    @return 1rem;
  }
}

h1 {
  font-size: font-size();
}

A

h1 {
  font-size: null;
}

B

h1 {
  font-size: 2rem;
}

C

h1 {
  font-size: 3rem;
}

D

h1 {
  font-size: 1rem;
}

💡 Hint

Default parameter is 3, which triggers the else case.

Since the default $level is 3, the else block returns 1rem for font size.

❓ accessibility

expert

How does using default parameter values in SASS mixins improve accessibility and maintainability?

Choose the best explanation of how default parameters in SASS mixins help create accessible and maintainable CSS.

A They allow setting fallback styles that ensure consistent appearance even if no arguments are passed, helping maintain readable and accessible design.

B They prevent any CSS from being generated if parameters are missing, avoiding broken styles.

C They automatically add ARIA attributes to HTML elements for screen readers.

D They force all parameters to be passed explicitly, reducing errors in CSS.

💡 Hint

Think about how default values help keep styles consistent and predictable.

Default parameters provide fallback values so styles remain consistent and accessible even if no arguments are given, improving maintainability and user experience.

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