@return statement in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass function?

Consider the following Sass function that uses @return. What will be the value of $result after compilation?

SASS

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

$result: double(5);

A 25

B 5

C 10

D Error: Undefined variable

💡 Hint

The function returns the input number multiplied by 2.

The function double takes a number and returns it multiplied by 2 using @return. So, double(5) returns 10.

🧠 Conceptual

intermediate

What happens if a Sass function has no @return statement?

In Sass, what is the result when a function does not include an @return statement?

SASS

@function noReturn() {
  $x: 5;
  // no return here
}

$value: noReturn();

A Compilation error: missing @return statement.

B The function returns 0 by default.

C The function returns the last variable assigned, $x (5).

D The function returns null, so $value is null.

💡 Hint

Sass functions must explicitly return a value with @return.

If a Sass function does not have an @return statement, it returns null by default.

❓ rendering

advanced

What color will the text be after Sass compilation?

Given this Sass code using a function with @return, what color will the paragraph text have in the browser?

SASS

@function theme-color($mode) {
  @if $mode == light {
    @return #333333;
  } @else if $mode == dark {
    @return #eeeeee;
  } @else {
    @return #000000;
  }
}

p {
  color: theme-color(dark);
}

A The text color will be transparent.

B The text color will be #eeeeee (light gray).

C The text color will be #000000 (black).

D The text color will be #333333 (dark gray).

💡 Hint

Check which color is returned when the mode is 'dark'.

The function returns #eeeeee when the input is 'dark', so the paragraph text color will be light gray (#eeeeee).

❓ selector

advanced

Which Sass function call returns a list with three items?

Given the Sass function below, which call returns a list with exactly three items?

SASS

@function create-list($a, $b, $c) {
  @return ($a, $b, $c);
}

A create-list(1, 2, 3)

B create-list(1, 2)

C create-list(1)

D create-list()

💡 Hint

The function returns a list of the three parameters passed.

Only calling the function with three arguments returns a list with three items. Other calls have fewer arguments and will cause errors or return fewer items.

❓ accessibility

expert

How can you use Sass functions with @return to improve accessible color contrast?

You want to create a Sass function that returns a text color based on background brightness to ensure good contrast for accessibility. Which function correctly uses @return to achieve this?

A

@function accessible-text-color($bg) {
  @if lightness($bg) > 50% {
    @return #000000;
  } @else {
    @return #ffffff;
  }
}

B

@function accessible-text-color($bg) {
  @if lightness($bg) > 50% {
    #000000;
  } @else {
    @return #ffffff;
  }
}

C

@function accessible-text-color($bg) {
  @if lightness($bg) < 50% {
    @return #000000;
  } @else {
    #ffffff;
  }
}

D

@function accessible-text-color($bg) {
  @return if(lightness($bg) > 50%, #000000, #ffffff);
}

💡 Hint

Make sure every path in the function uses @return to send back a color.

Option A correctly uses @return in both branches to return black or white depending on background brightness, ensuring accessible contrast. Other options miss @return in some branches or have syntax errors.