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.

Practice

1. What is the main purpose of the sass:string module in Sass?

easy

A. To handle layout grids and flexbox

B. To create animations using keyframes

C. To manipulate and work with text strings in Sass stylesheets

D. To manage colors and gradients

Solution

1. Step 1: Understand the module's role

   The sass:string module provides functions to work with text strings, such as changing case or joining strings.

2. Step 2: Compare with other options

   Options A, B, and C relate to layout, animations, and colors, which are not the focus of the string module.

3. Final Answer:

   To manipulate and work with text strings in Sass stylesheets -> Option C

4. Quick Check:

   sass:string = text manipulation [OK]

Hint: Remember sass:string is for text, not colors or layout [OK]

Common Mistakes:

• Confusing string module with color or layout modules
• Thinking it handles animations
• Assuming it manages Sass variables

2. Which of the following is the correct way to import the string module in Sass?

easy

A. @use 'sass:string';

B. @import 'string';

C. @require 'sass:string';

D. @include 'string';

Solution

1. Step 1: Recall Sass module import syntax

   Modern Sass uses @use to import modules, so @use 'sass:string'; is correct.

2. Step 2: Identify incorrect options

   @import is deprecated for modules, @require and @include are invalid for importing modules.

3. Final Answer:

   @use 'sass:string'; -> Option A

4. Quick Check:

   Use @use for modules [OK]

Hint: Use @use 'sass:string'; to import string module [OK]

Common Mistakes:

• Using @import instead of @use
• Trying @require or @include which are invalid
• Forgetting quotes around module name

3. What will be the output of this Sass code?

@use 'sass:string';

$word: 'Hello';
$result: string.to-upper-case($word);

.test {
  content: $result;
}

medium

A. .test { content: 'HELLO'; }

B. .test { content: 'hello'; }

C. .test { content: 'Hello'; }

D. Error: to-upper-case is not a function

Solution

1. Step 1: Understand the function used

   string.to-upper-case() converts all letters in the string to uppercase.

2. Step 2: Apply function to input

   Input is 'Hello', output becomes 'HELLO'. The CSS rule sets content to 'HELLO'.

3. Final Answer:

   .test { content: 'HELLO'; } -> Option A

4. Quick Check:

   to-upper-case('Hello') = 'HELLO' [OK]

Hint: to-upper-case makes all letters uppercase [OK]

Common Mistakes:

• Confusing to-upper-case with to-lower-case
• Expecting original string unchanged
• Thinking function is undefined

4. Identify the error in this Sass code using the string module:

@use 'sass:string';

$greeting: 'Hi';
$new: string.append($greeting, 123);

.test {
  content: $new;
}

medium

A. Missing semicolon after $greeting declaration

B. Cannot append a number directly to a string

C. Module name should be 'string-module' not 'sass:string'

D. Function name should be string.concat, not string.append

Solution

1. Step 1: Check function usage

   string.append() expects string arguments, but 123 is a number, causing a type error.

2. Step 2: Verify other syntax

   Semicolons are correct, module name and function name are valid as per Sass string module.

3. Final Answer:

   Cannot append a number directly to a string -> Option B

4. Quick Check:

   string.append needs strings, not numbers [OK]

Hint: Append only strings, convert numbers first [OK]

Common Mistakes:

• Passing numbers without converting to strings
• Confusing function names
• Incorrect module import syntax

5. You want to create a Sass function that takes a string and returns it with the first letter capitalized and the rest lowercase. Which of these code snippets correctly uses the sass:string module to achieve this?

hard

A. @use 'sass:string';

@function capitalize($text) {
@return string.to-lower-case($text);
}

B. @use 'sass:string';

@function capitalize($text) {
@return string.to-lower-case(string.slice($text, 1, 1)) + string.to-upper-case(string.slice($text, 2));
}

C. @use 'sass:string';

@function capitalize($text) {
@return string.to-upper-case($text);
}

D. @use 'sass:string';

@function capitalize($text) {
@return string.to-upper-case(string.slice($text, 1, 1)) + string.to-lower-case(string.slice($text, 2));
}

Solution

1. Step 1: Understand the goal

   The function must uppercase the first letter and lowercase the rest of the string.

2. Step 2: Analyze each option

   @use 'sass:string'; @function capitalize($text) { @return string.to-upper-case(string.slice($text, 1, 1)) + string.to-lower-case(string.slice($text, 2)); } correctly slices the first character, uppercases it, then slices the rest and lowercases it, joining both parts.
   @use 'sass:string'; @function capitalize($text) { @return string.to-lower-case(string.slice($text, 1, 1)) + string.to-upper-case(string.slice($text, 2)); } reverses cases incorrectly.
   @use 'sass:string'; @function capitalize($text) { @return string.to-upper-case($text); } uppercases whole string.
   @use 'sass:string'; @function capitalize($text) { @return string.to-lower-case($text); } lowercases whole string.

3. Final Answer:

   Capitalizes the first letter and lowercases the rest -> Option D

4. Quick Check:

   First letter uppercase + rest lowercase = slice(1,1) upper + slice(2) lower [OK]

Hint: Slice first char uppercase, rest lowercase, then join [OK]

Common Mistakes:

• Applying case functions to whole string only
• Mixing up upper and lower case parts
• Not slicing string correctly