Built-in string functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using string functions?

Consider the following Sass code snippet. What will be the value of $result after compilation?

SASS

$text: "Hello World";
$result: str-insert($text, "-", 6);

A "Hello- World"

B "Hello World-"

C "-Hello World"

D "Hello World"

💡 Hint

The str-insert function inserts a string at a specific index.

The str-insert function inserts the second string argument into the first string at the given index. Index 6 is right after 'Hello', so the dash is inserted there.

🧠 Conceptual

intermediate

Which Sass function returns the length of a string?

You want to find out how many characters are in a string variable in Sass. Which function should you use?

A str-length()

B length()

C string-length()

D count()

💡 Hint

The function name starts with 'str-' and relates to length.

The correct Sass function to get the number of characters in a string is str-length().

❓ selector

advanced

What error occurs when using str-slice with invalid indexes?

Given the Sass code str-slice("Sass", 5, 10), what happens?

A "s"

B "" (empty string)

C Error: Invalid index

D "Sass"

💡 Hint

If the start index is beyond the string length, what does str-slice return?

If the start index is greater than the string length, str-slice returns an empty string instead of an error.

❓ rendering

advanced

What is the output color of this Sass code using string functions?

This Sass code uses string functions to create a color variable. What color will be rendered in the browser?

SASS

$hex: "#1a2b3c";
$color: unquote($hex);
body { background-color: $color; }

A Background color is #1a2b3c (bright red)

B Compilation error due to unquote usage

C Background color is transparent

D Background color is #1a2b3c (a dark blue-gray)

💡 Hint

The unquote function removes quotes so the color is valid CSS.

The variable $color becomes the color code #1a2b3c without quotes, so the background color is a dark blue-gray shade.

❓ accessibility

expert

How can you use Sass string functions to improve accessibility in CSS content?

You want to add dynamic content with a screen reader label using Sass string functions. Which approach correctly combines strings for accessibility?

SASS

$label: "Close button";
$aria: "aria-label='" + $label + "'";
.button::after { content: $aria; }

A Use unquote: content: unquote("aria-label='" + $label + "'");

B Use str-insert to add quotes: content: str-insert($aria, '"', 1);

C Use interpolation: content: "#{"aria-label='" + $label + "'"}";

D Use str-length to set content length: content: str-length($aria);

💡 Hint

Sass interpolation helps combine strings inside content property correctly.

Using interpolation with #{...} correctly inserts the aria-label string as content, making it accessible for screen readers.