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.