Function definition with @function in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS function?

Given the following SASS code, what is the output CSS after compilation?

SASS

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

.box {
  width: double(5rem);
  height: double(3rem);
}

A

.box {
  width: 10rem;
  height: 6rem;
}

B

.box {
  width: 7rem;
  height: 5rem;
}

C

.box {
  width: 5rem * 2;
  height: 3rem * 2;
}

D

.box {
  width: 25rem;
  height: 15rem;
}

💡 Hint

Remember that the function returns the number multiplied by 2, so 5rem becomes 10rem.

The function double multiplies the input by 2. So 5rem * 2 = 10rem and 3rem * 2 = 6rem. The compiled CSS uses these values.

🧠 Conceptual

intermediate

What error does this SASS function code produce?

Consider this SASS function code. What error will it cause when compiling?

SASS

@function add($a, $b) {
  $sum: $a + $b
  @return $sum;
}

.box {
  width: add(3rem, 2rem);
}

A RuntimeError: Undefined variable $sum

B TypeError: Cannot add two numbers

C No error, compiles correctly

D SyntaxError: Missing semicolon after variable assignment

💡 Hint

Check the line where $sum is assigned. Is the syntax complete?

In SASS, each statement must end with a semicolon. The line "$sum: $a + $b" is missing a semicolon, causing a syntax error.

❓ rendering

advanced

What is the computed width of .container?

Given this SASS code with a function, what is the width value in the compiled CSS?

SASS

@function scale($size, $factor: 1.5) {
  @return $size * $factor;
}

.container {
  width: scale(4rem);
}

A

.container {
  width: 8rem;
}

B

.container {
  width: 1.5rem;
}

C

.container {
  width: 6rem;
}

D

.container {
  width: 4rem;
}

💡 Hint

The function multiplies the size by the factor, which defaults to 1.5.

The function scale multiplies 4rem by the default factor 1.5, resulting in 6rem width.

❓ selector

advanced

Which option correctly uses a function to set color opacity?

Which SASS code correctly defines and uses a function to return a color with 50% opacity?

A

@function half-opacity($color) {
  @return rgba($color, 0.5);
}

.box {
  background-color: half-opacity(#ff0000);
}

B

@function half-opacity($color) {
  @return rgba($color, 50%);
}

.box {
  background-color: half-opacity(#ff0000);
}

C

@function half-opacity($color) {
  @return rgba($color, 5);
}

.box {
  background-color: half-opacity(#ff0000);
}

D

@function half-opacity($color) {
  @return rgba($color, '0.5');
}

.box {
  background-color: half-opacity(#ff0000);
}

💡 Hint

Opacity in rgba() is a number between 0 and 1, not a percentage or string.

Option A correctly uses 0.5 as a number for 50% opacity. Option A uses 50% which is invalid, C uses 5 which is out of range, D uses a string which is invalid.

❓ accessibility

expert

How can a SASS function improve accessible color contrast?

Which SASS function code snippet best helps create accessible text colors by adjusting brightness for contrast?

A

@function adjust-brightness($color, $amount) {
  @return darken($color, $amount);
}

B

@function adjust-brightness($color, $amount) {
  @return mix(black, $color, $amount);
}

C

@function adjust-brightness($color, $amount) {
  @return saturate($color, $amount);
}

D

@function adjust-brightness($color, $amount) {
  @return lighten($color, $amount);
}

💡 Hint

Mixing black with a color can darken it proportionally, helping contrast.

Option B uses mix() with black to adjust brightness dynamically, which can improve contrast for accessibility. Lighten and darken alone may not provide consistent contrast. Saturate changes color intensity but not brightness.

Practice

1. What does the @function directive do in Sass?

easy

A. It defines reusable code blocks that return values.

B. It imports external CSS files.

C. It creates variables for colors.

D. It applies styles to HTML elements.

Solution

1. Step 1: Understand the purpose of @function

   The @function directive in Sass is used to create reusable blocks of code that can return a value.

2. Step 2: Compare with other options

   Options A, B, and D describe other Sass or CSS features, but only C correctly describes @function.

3. Final Answer:

   It defines reusable code blocks that return values. -> Option A

4. Quick Check:

   @function creates reusable code blocks [OK]

Hint: Remember: @function returns values, not styles directly [OK]

Common Mistakes:

• Confusing @function with @mixin
• Thinking @function applies styles
• Mixing up @function with variable declaration

2. Which of the following is the correct syntax to define a function named double that returns twice the input $n in Sass?

easy

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

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

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

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

Solution

1. Step 1: Check the function declaration syntax

   In Sass, functions start with @function, followed by the name and parameters in parentheses.

2. Step 2: Verify the return statement

   The correct way to return a value is using @return, not just return.

3. Final Answer:

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

4. Quick Check:

   Use @function and @return for Sass functions [OK]

Hint: Use @function and @return keywords exactly [OK]

Common Mistakes:

• Using 'return' instead of '@return'
• Omitting the @ in @function
• Confusing @function with @mixin

3. Given the Sass function:

@function add($a, $b) { @return $a + $b; }

What will be the output of this Sass code?

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

medium

A. .result { width: 10px 5px; }

B. .result { width: 15px; }

C. Syntax error

D. .result { width: add(10px, 5px); }

Solution

1. Step 1: Understand the function behavior

   The function add takes two values and returns their sum using @return $a + $b;.

2. Step 2: Apply the function in the style

   Calling add(10px, 5px) returns 15px, so the CSS becomes .result { width: 15px; }.

3. Final Answer:

   .result { width: 15px; } -> Option B

4. Quick Check:

   Function returns sum, so width is 15px [OK]

Hint: Functions return values, so output replaces function call [OK]

Common Mistakes:

• Expecting function name to appear in output
• Confusing list output with addition
• Thinking it causes syntax error

4. Identify the error in this Sass function:

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

medium

A. Parameters must be strings

B. Function name is invalid

C. Missing @ before return keyword

D. Function cannot have two parameters

Solution

1. Step 1: Check the return statement syntax

   In Sass functions, the return keyword must be @return, not just return.

2. Step 2: Verify other parts

   The function name and parameters are valid, and multiple parameters are allowed.

3. Final Answer:

   Missing @ before return keyword -> Option C

4. Quick Check:

   Use @return, not return [OK]

Hint: Always use @return in Sass functions [OK]

Common Mistakes:

• Using 'return' without @
• Thinking parameters must be strings
• Believing function names can't have multiple parameters

5. You want to create a Sass function shade-color that darkens a color by a percentage. Which of these function definitions correctly uses @function and @return to achieve this?

A) @function shade-color($color, $percent) { @return darken($color, $percent); }
B) @function shade-color($color, $percent) { return darken($color, $percent); }
C) @mixin shade-color($color, $percent) { @return darken($color, $percent); }
D) @function shade-color($color, $percent) { darken($color, $percent); }

hard

A. @function shade-color($color, $percent) { darken($color, $percent); }

B. @function shade-color($color, $percent) { return darken($color, $percent); }

C. @mixin shade-color($color, $percent) { @return darken($color, $percent); }

D. @function shade-color($color, $percent) { @return darken($color, $percent); }

Solution

1. Step 1: Confirm correct function syntax

   The function must start with @function and use @return to send back the value.

2. Step 2: Check each option

   @function shade-color($color, $percent) { @return darken($color, $percent); } uses @function and @return correctly. @function shade-color($color, $percent) { return darken($color, $percent); } uses return without @, which is invalid. @mixin shade-color($color, $percent) { @return darken($color, $percent); } uses @mixin instead of @function. @function shade-color($color, $percent) { darken($color, $percent); } lacks a return statement.

3. Final Answer:

   @function shade-color($color, $percent) { @return darken($color, $percent); } -> Option D

4. Quick Check:

   Use @function with @return for value-returning functions [OK]

Hint: Functions need @return; mixins do not return values [OK]

Common Mistakes:

• Using return without @
• Confusing mixin with function
• Omitting @return statement