Built-in string functions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to convert the string to uppercase.

SASS

$text: "hello world";
$result: [1]($text);

Drag options to blanks, or click blank then click option'

Ato-upper-case

Bto-upper-case()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the function name in the blank.

Using JavaScript or CSS functions instead of Sass functions.

The to-upper-case() function converts a string to uppercase in Sass.

2fill in blank

medium

Complete the code to get the length of the string.

SASS

$text: "Sass";
$length: [1]($text);

Drag options to blanks, or click blank then click option'

Astrlen

Bsize

Ccount

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using functions that count list items instead of string length.

Using functions from other languages like strlen.

The length() function returns the number of characters in a string in Sass.

3fill in blank

hard

Fix the error in the code to extract a substring starting at index 2 with length 3.

SASS

$text: "SassLang";
$sub: str-slice($text, [1], 4);

Drag options to blanks, or click blank then click option'

A3

B2

C1

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 as the start index (like in some other languages).

Using the wrong start index that extracts wrong substring.

In Sass, string indexes start at 1. To start at the third character (index 2), use 2.

4fill in blank

hard

Fill both blanks to check if the string starts with 'Sa' and ends with 'ng'.

SASS

$text: "SassLang";
$starts: str-[1]($text, "Sa");
$ends: str-[2]($text, "ng");

Drag options to blanks, or click blank then click option'

Astarts-with

Bends-with

Ccontains

Dindex-of

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the function names for start and end checks.

Using contains or index-of instead of start/end checks.

Use str-starts-with() to check the start and str-ends-with() to check the end of a string in Sass.

5fill in blank

hard

Fill all three blanks to create a new string by inserting 'Cool' at index 5 and then converting to lowercase.

SASS

$text: "SassLang";
$new-text: str-[1]($text, "Cool", [2]);
$result: str-[3]($new-text);

Drag options to blanks, or click blank then click option'

Ainsert

B5

Cto-lower-case

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names for insert or lowercase.

Using a wrong index number for insertion.

Use str-insert() to add text at a position, then str-to-lower-case() to convert the result to lowercase.

Practice

1. Which Sass built-in string function returns the length of a string?
length("hello")

easy

A. Returns the string in uppercase

B. Returns the number of characters in the string

C. Returns the string reversed

D. Returns the first character of the string

Solution

1. Step 1: Understand the length() function

   The length() function in Sass returns how many characters are in a string.

2. Step 2: Apply to the example string

   For the string "hello", the length is 5 characters.

3. Final Answer:

   Returns the number of characters in the string -> Option B

4. Quick Check:

   length("hello") = 5 [OK]

Hint: Remember length() counts characters in a string [OK]

Common Mistakes:

• Confusing length() with uppercase conversion
• Thinking length() returns the first character
• Mixing length() with reverse functions

2. Which of the following is the correct syntax to convert a string to uppercase in Sass?

easy

A. uppercase("text")

B. to-upper-case("text")

C. toUpperCase("text")

D. to-upper("text")

Solution

1. Step 1: Recall Sass string uppercase function

   The correct Sass function to convert a string to uppercase is uppercase().

2. Step 2: Check syntax correctness

   The function is called as uppercase("text"), which matches uppercase("text").

3. Final Answer:

   uppercase("text") -> Option A

4. Quick Check:

   uppercase("text") converts to "TEXT" [OK]

Hint: Use uppercase() exactly as shown for capital letters [OK]

Common Mistakes:

• Using camelCase like toUpperCase() which is not Sass syntax
• Adding dashes incorrectly in function names
• Confusing with CSS text-transform property

3. What is the output of this Sass code?

$str: "Sass";
$result: str-insert($str, "3", 3);

What is the value of $result?

medium

A. "Sass3"

B. "Sas3s"

C. "S3ass"

D. "Sa3ss"

Solution

1. Step 1: Understand str-insert() function

   This function inserts a string into another string at a given index (1-based).

2. Step 2: Apply insertion at position 3

   Original string is "Sass". Insert "3" at position 3 means after the second character: "Sa" + "3" + "ss" = "Sa3ss".

3. Final Answer:

   "Sa3ss" -> Option D

4. Quick Check:

   str-insert("Sass", "3", 3) = "Sa3ss" [OK]

Hint: Remember str-insert uses 1-based index for insertion [OK]

Common Mistakes:

• Using 0-based index instead of 1-based
• Inserting at wrong position
• Confusing str-insert with str-slice

4. Identify the error in this Sass code:

$text: "Hello";
$new-text: str-slice($text, 2, 1);

medium

A. Start index is greater than end index, causing empty string

B. str-slice requires three arguments, missing one

C. Variable names must start with uppercase letters

D. Strings cannot be sliced in Sass

Solution

1. Step 1: Check str-slice() parameters

   The function takes a string, a start index, and an optional end index. Here start=2, end=1.

2. Step 2: Analyze index order

   Since start index (2) is greater than end index (1), the slice returns an empty string, which is likely unintended.

3. Final Answer:

   Start index is greater than end index, causing empty string -> Option A

4. Quick Check:

   str-slice("Hello", 2, 1) = "" (empty) [OK]

Hint: Ensure start index ≤ end index in str-slice() [OK]

Common Mistakes:

• Assuming str-slice needs three arguments always
• Thinking variable names must be uppercase
• Believing strings can't be sliced in Sass

5. You want to create a Sass function that returns the first three characters of a string in uppercase. Which code correctly achieves this?

hard

A. @function first-three-uppercase($str) { @return str-insert(uppercase($str), 3, 1); }

B. @function first-three-uppercase($str) { @return uppercase(str-slice($str, 1)); }

C. @function first-three-uppercase($str) { @return str-slice(uppercase($str), 1, 3); }

D. @function first-three-uppercase($str) { @return uppercase(str-insert($str, 3, 1)); }

Solution

1. Step 1: Understand the goal

   We want the first three characters of the string in uppercase: uppercase first, then slice precisely.

2. Step 2: Analyze each option

   @function first-three-uppercase($str) { @return str-slice(uppercase($str), 1, 3); } uppercases whole string, then slices first 3 characters -- correct.
   @function first-three-uppercase($str) { @return uppercase(str-slice($str, 1)); } str-slice from 1 to end (no end index), uppercases entire string -- incorrect, too many chars.
   @function first-three-uppercase($str) { @return str-insert(uppercase($str), 3, 1); } uses str-insert incorrectly and passes number 3 as insert string -- error.
   @function first-three-uppercase($str) { @return uppercase(str-insert($str, 3, 1)); } similar str-insert misuse -- incorrect.

3. Final Answer:

   @function first-three-uppercase($str) { @return str-slice(uppercase($str), 1, 3); } -> Option C

4. Quick Check:

   str-slice(uppercase($str), 1, 3) returns first 3 uppercase chars [OK]

Hint: Uppercase full string first, then slice first 3 chars [OK]

Common Mistakes:

• Forgetting end index in str-slice causing full string slice
• Using str-insert instead of str-slice
• Passing numbers as insert strings causing type error