Why custom functions are useful in SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use custom functions in Sass?

Which of the following best explains why custom functions are useful in Sass?

A They automatically convert Sass files into JavaScript files for better browser compatibility.

B They allow you to reuse code by performing calculations and returning values, making stylesheets easier to maintain.

C They replace CSS selectors with HTML tags to simplify styling.

D They let you write CSS without any syntax rules or structure.

💡 Hint

Think about how functions help avoid repeating code and make styles easier to update.

Custom functions in Sass let you write reusable code blocks that perform calculations or return values. This helps keep your stylesheets clean and easier to maintain.

📝 Syntax

intermediate

Output of a Sass custom function

What is the output CSS of this Sass code using a custom function? @function double($n) { @return $n * 2; } .box { width: double(5rem); }

SASS

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

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

A SyntaxError: Invalid function call

B

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

C

.box {
  width: 5rem;
}

D

.box {
  width: 10rem;
}

💡 Hint

The function doubles the input value.

The custom function double multiplies the input by 2. So, double(5rem) becomes 10rem in the compiled CSS.

❓ selector

advanced

Using custom functions with selectors

Consider this Sass code with a custom function that returns a color. What color will the .alert background be in the compiled CSS? @function alert-color($type) { @if $type == 'error' { @return #ff0000; } @else if $type == 'success' { @return #00ff00; } @else { @return #0000ff; } } .alert { background-color: alert-color('error'); }

SASS

@function alert-color($type) {
  @if $type == 'error' {
    @return #ff0000;
  } @else if $type == 'success' {
    @return #00ff00;
  } @else {
    @return #0000ff;
  }
}

.alert {
  background-color: alert-color('error');
}

A

.alert {
  background-color: #ff0000;
}

B

.alert {
  background-color: #00ff00;
}

C

.alert {
  background-color: #0000ff;
}

D SyntaxError: Invalid color value

💡 Hint

The function returns red for 'error' type.

The function checks the input string and returns #ff0000 for 'error'. So the background color is red.

❓ layout

advanced

Custom function impact on layout values

Given this Sass code, what will be the margin value in the compiled CSS? @function spacing($factor) { @return $factor * 1.5rem; } .container { margin: spacing(2); }

SASS

@function spacing($factor) {
  @return $factor * 1.5rem;
}

.container {
  margin: spacing(2);
}

A

.container {
  margin: 3rem;
}

B

.container {
  margin: 2rem;
}

C TypeError: Cannot multiply number by unit

D

.container {
  margin: spacing(2);
}

💡 Hint

Multiply 2 by 1.5rem.

The function multiplies 2 by 1.5rem, resulting in 3rem margin in CSS.

❓ accessibility

expert

Using custom functions to improve accessibility

How can custom functions in Sass help improve accessibility in web design?

A By converting all text to uppercase for better visibility.

B By automatically adding ARIA attributes to HTML elements.

C By calculating and returning color contrast ratios to ensure text is readable against backgrounds.

D By disabling keyboard navigation to simplify user interaction.

💡 Hint

Think about how colors and contrast affect readability.

Custom functions can calculate color contrast ratios, helping designers pick colors that meet accessibility standards for readability.