sass:string module - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using string.length?

Consider the following Sass code snippet:

@use "sass:string";
$my-string: "Hello, Sass!";
$length: string.length($my-string);
.result {
  content: $length;
}

What will be the rendered CSS content value?

SASS

@use "sass:string";
$my-string: "Hello, Sass!";
$length: string.length($my-string);
.result {
  content: $length;
}

A content: 10;

B content: 11;

C content: 13;

D content: 12;

💡 Hint

Count all characters including spaces and punctuation.

The string "Hello, Sass!" has 13 characters including the comma, space, and exclamation mark.

🧠 Conceptual

intermediate

Which option correctly extracts the substring "Sass" using string.slice?

Given the string $text: "Welcome to Sass!" in Sass, which option correctly extracts the substring "Sass" using the string.slice function?

SASS

@use "sass:string";
$text: "Welcome to Sass!";
$sub: string.slice($text, ?, ?);
.result {
  content: $sub;
}

A string.slice($text, 12, 15)

B string.slice($text, 11, 14)

C string.slice($text, 11, 15)

D string.slice($text, 12, 14)

💡 Hint

Remember that string.slice uses 1-based indexing and includes both start and end positions.

The substring "Sass" starts at character 12 and ends at character 15, so slicing from 12 to 15 extracts "Sass".

❓ selector

advanced

What CSS is generated by this Sass code using string.insert?

Analyze this Sass code:

@use "sass:string";
$base: "color";
$inserted: string.insert($base, "ful", 6);
.result {
  content: $inserted;
}

What is the content value in the generated CSS?

SASS

@use "sass:string";
$base: "color";
$inserted: string.insert($base, "ful", 6);
.result {
  content: $inserted;
}

A content: "colofulr";

B content: "colorful";

C content: "colorfulr";

D ;"lufroloc" :tnetnoc

💡 Hint

string.insert inserts the new string before the character at the given index.

Inserting "ful" at position 6 (after 'r') in "color" results in "colorful".

❓ layout

advanced

How does string.repeat affect layout when used in content?

Given this Sass code:

@use "sass:string";
$pattern: string.repeat("-", 5);
.divider::before {
  content: $pattern;
  display: block;
  text-align: center;
}

What will the user see in the browser?

SASS

@use "sass:string";
$pattern: string.repeat("-", 5);
.divider::before {
  content: $pattern;
  display: block;
  text-align: center;
}

A A centered line of 5 dashes: -----

B A block with 1 dash repeated 5 times vertically

C An error because string.repeat cannot be used in content

D A centered line of 4 dashes: ----

💡 Hint

string.repeat repeats the string horizontally the given number of times.

string.repeat("-", 5) produces "-----" which is shown centered in the block.

❓ accessibility

expert

Which option best ensures accessible dynamic content using string.replace in Sass?

You want to replace all underscores (_) with spaces in a CSS content property for better screen reader clarity. Which Sass code snippet using string.replace achieves this correctly and accessibly?

SASS

@use "sass:string";
$text: "user_name_profile";
$clean-text: string.replace($text, "_", " ", ?);
.accessible {
  content: $clean-text;
}

A string.replace($text, "_", " ")

B string.replace($text, "_", " ", 0)

C string.replace($text, "_", " ", "first")

D string.replace($text, "_", " ", "all")

💡 Hint

To replace all occurrences, use the correct fourth argument.

Using "all" as the fourth argument replaces every underscore with a space, improving screen reader text clarity.