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.