Functions with parameters in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output color of this Sass function call?

Given the Sass function below, what color will be output when calling darkenColor(#6699cc, 20%)?

SASS

@function darkenColor($color, $amount) {
  @return darken($color, $amount);
}

.element {
  color: darkenColor(#6699cc, 20%);
}

A #336699

B #4d7ab8

C #527aa3

D #335577

💡 Hint

Think about how the darken function reduces brightness by the given percentage.

The darken function reduces the lightness of the color by the specified percentage. Darkening #6699cc by 20% results in #336699.

🧠 Conceptual

intermediate

What happens if a parameter is missing in a Sass function call?

Consider this Sass function with two parameters, where the second has a default value. What color will be output when calling adjustColor(#ff0000)?

SASS

@function adjustColor($color, $amount: 10%) {
  @return lighten($color, $amount);
}

.element {
  color: adjustColor(#ff0000);
}

A #ff4d4d

B #ff1a1a

C #ff3333

D #ff0000

💡 Hint

Default parameter values are used when no argument is provided.

Since the second parameter has a default of 10%, calling adjustColor with only one argument lightens the color by 10%, resulting in #ff3333.

❓ selector

advanced

Which option correctly uses a Sass function with multiple parameters?

Given the function below, which option correctly calls mixColors to mix blue and red with a 50% weight?

SASS

@function mixColors($color1, $color2, $weight) {
  @return mix($color1, $color2, $weight);
}

A .box { background: mixColors(blue, red, 50%); }

B .box { background: mixColors(blue, 50%, red); }

C .box { background: mixColors(50%, blue, red); }

D .box { background: mixColors(red, blue); }

💡 Hint

Check the order and types of parameters in the function definition.

The function expects parameters in the order: color1, color2, weight. Only option A matches this order and types.

❓ layout

advanced

How does this Sass function affect layout spacing?

This function calculates padding based on a multiplier. What is the padding output for calculatePadding(2) if the base padding is 1rem?

SASS

$base-padding: 1rem;
@function calculatePadding($multiplier) {
  @return $base-padding * $multiplier;
}

.container {
  padding: calculatePadding(2);
}

A 1rem

B 1rem 2rem

C calc(1rem * 2)

D 2rem

💡 Hint

Multiplying rem units by a number scales the size.

Multiplying 1rem by 2 results in 2rem, so the padding is 2rem on all sides.

❓ accessibility

expert

Which Sass function call best supports accessible color contrast?

Given this function that adjusts color brightness, which call ensures text color has enough contrast on a light background (#f0f0f0)?

SASS

@function accessibleTextColor($bgColor) {
  @if (lightness($bgColor) > 50%) {
    @return darken($bgColor, 70%);
  } @else {
    @return lighten($bgColor, 70%);
  }
}

A .text { color: accessibleTextColor(#808080); }

B .text { color: accessibleTextColor(#f0f0f0); }

C .text { color: accessibleTextColor(#ffffff); }

D .text { color: accessibleTextColor(#333333); }

💡 Hint

Light backgrounds need dark text for contrast.

Since #f0f0f0 is light (lightness > 50%), the function darkens it by 70%, producing a dark color suitable for text contrast.