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.

Practice

1. What is the main purpose of using @function with parameters in Sass?

easy

A. To define CSS classes with fixed styles

B. To import external CSS files

C. To create reusable code blocks that accept different inputs

D. To add comments inside Sass files

Solution

1. Step 1: Understand what @function does

   @function defines reusable code that can take inputs and return values.

2. Step 2: Identify the role of parameters

   Parameters allow the function to work with different values each time it is called.

3. Final Answer:

   To create reusable code blocks that accept different inputs -> Option C

4. Quick Check:

   Functions with parameters = reusable code with inputs [OK]

Hint: Functions reuse code by accepting inputs [OK]

Common Mistakes:

• Confusing functions with mixins
• Thinking functions define CSS classes
• Assuming functions import files

2. Which of the following is the correct syntax to define a Sass function named double that takes one parameter $n?

easy

A. @function double { $n -> $n * 2; }

B. function double($n) { return $n * 2; }

C. @mixin double($n) { @return $n * 2; }

D. @function double($n) { @return $n * 2; }

Solution

1. Step 1: Check the function keyword and parameter syntax

   The correct keyword is @function followed by the function name and parameters in parentheses.

2. Step 2: Verify the return statement

   The function must use @return to send back the result.

3. Final Answer:

   @function double($n) { @return $n * 2; } -> Option D

4. Quick Check:

   Correct function syntax uses @function and @return [OK]

Hint: Use @function and @return with parameters in parentheses [OK]

Common Mistakes:

• Using 'function' without @
• Mixing up mixins and functions
• Omitting @return keyword

3. What will be the output CSS of the following Sass code?

@function add($a, $b) { @return $a + $b; }
.box {
  width: add(10px, 5px);
}

medium

A. .box { width: 15px; }

B. .box { width: add(10px, 5px); }

C. .box { width: 10px + 5px; }

D. Syntax error due to missing semicolon

Solution

1. Step 1: Understand the function call

   The function add returns the sum of two values, here 10px + 5px = 15px.

2. Step 2: Check the output CSS

   The Sass compiler replaces the function call with the returned value, so width becomes 15px.

3. Final Answer:

   .box { width: 15px; } -> Option A

4. Quick Check:

   Function returns sum, output uses computed value [OK]

Hint: Functions return values replaced in CSS output [OK]

Common Mistakes:

• Expecting function name in output
• Thinking Sass outputs raw expressions
• Confusing mixin behavior with functions

4. Identify the error in this Sass function:

@function multiply($x, $y) {
  $result: $x * $y;
}

medium

A. Incorrect variable declaration syntax

B. Missing @return statement to output the result

C. Function name should be @mixin

D. Parameters must be declared without $

Solution

1. Step 1: Check function body for return

   The function assigns the product to a variable but does not return it.

2. Step 2: Understand function requirements

   Sass functions must use @return to send back a value; otherwise, they produce no output.

3. Final Answer:

   Missing @return statement to output the result -> Option B

4. Quick Check:

   Functions need @return to output values [OK]

Hint: Always use @return to output function results [OK]

Common Mistakes:

• Forgetting @return in functions
• Confusing mixins with functions
• Using variables without $

5. You want a Sass function responsive-size that takes a pixel value $px and returns a rem value assuming 16px base font size. Which function definition correctly achieves this?

hard

A. @function responsive-size($px) { @return $px / 16 * 1rem; }

B. @function responsive-size($px) { @return $px * 16rem; }

C. @function responsive-size($px) { @return $px + 16rem; }

D. @function responsive-size($px) { @return rem($px / 16); }

Solution

1. Step 1: Understand rem conversion

   To convert pixels to rem, divide the pixel value by the base font size (16).

2. Step 2: Write the correct return expression

   Multiply the division result by 1rem to get the rem unit value.

3. Step 3: Check each option

   @function responsive-size($px) { @return $px / 16 * 1rem; } correctly divides $px by 16 and multiplies by 1rem. Others either multiply incorrectly or use invalid functions.

4. Final Answer:

   @function responsive-size($px) { @return $px / 16 * 1rem; } -> Option A

5. Quick Check:

   Divide px by 16, multiply by 1rem for rem units [OK]

Hint: Divide px by 16 and multiply by 1rem for rem conversion [OK]

Common Mistakes:

• Multiplying px by 16 instead of dividing
• Adding units instead of multiplying
• Using undefined rem() function