Skip to main content

Introduction to Sass String Functions

Sass String Functions​

Sass is a preprocessor scripting language that is used to simplify CSS coding. Sass string functions are used to manipulate strings in Sass.

Here are some common Sass string functions:

  • str-length() - returns the length of a string in characters.
$str: "Hello, World!";
length: str-length($str); // output: 13
  • to-upper-case() - converts a string to uppercase.
$str: "hello, world!";
uppercase: to-upper-case($str); // output: HELLO, WORLD!
  • to-lower-case() - converts a string to lowercase
$str: "HELLO, WORLD!";
lowercase: to-lower-case($str); // output: hello, world!
  • str-insert() - inserts a string into another string at a specified index.
$str: "Hello, World!";
$inserted: str-insert($str, "cruel ", 7);
// output: "Hello, cruel World!"
  • str-index() - returns the index of a substring within a string.
$str: "Hello, World!";
$index: str-index($str, "World");
// output: 8
  • str-slice() - extracts a portion of a string based on a specified start and end index.
$str: "Hello, World!";
$sliced: str-slice($str, 1, 5);
// output: "ello,"
  • str-contains() - checks if a string contains a specified substring.
$str: "Hello, World!";
$contains: str-contains($str, "Hello");
// output: true
  • str-replace() - replaces all occurrences of a substring within a string with another substring.
$str: "Hello, World!";
$replaced: str-replace($str, "World", "Universe");
// output: "Hello, Universe!"
  • unquote() - removes quotes from a string.
$str: "Hello, World!";
$unquoted: unquote($str);
// output: Hello, World!
  • str-join() - joins two or more strings together with a specified separator.
$first: "Hello";
$second: "World";
$joined: str-join($first, $second, "-");
// output: "Hello-World"

  • quote() - adds quotes to a string.
$str: Hello, World!;
$quoted: quote($str);
// output: "Hello, World!"

  • to-numeric() - converts a string to a number.
$str: "42";
$num: to-numeric($str);
// output: 42

  • unique-id() - generates a unique identifier.
$unique-id: unique-id();
// output: "u3a6fd67"

  • inspect() - returns a string representation of a value.
$value: (foo: 42, bar: (baz: 24));
$inspection: inspect($value);
// output: (foo: 42, bar: (baz: 24))

  • to-hex() - converts an RGB color value to a hexadecimal color value.
$color: rgb(255, 0, 0);
$hex: to-hex($color);
// output: #ff0000

  • percentage() - converts a unitless number to a percentage.
$num: 0.5;
$percentage: percentage($num);
// output: 50%

How to Use Sass String Function​

To use Sass string functions, you need to follow these steps:

  • Define a string variable or a string value that you want to manipulate.

As an example:

$str: "Hello, World!";

  • Call the desired string function with the string variable or value as an argument.

As an example:

$length: str-length($str);

  • Use the returned value of the string function in your stylesheets.

As an example:

h1::before {
  content: "The length of the string is " + $length + ".";
}

In this example:

  • We are using the str-length() function to get the length of the $str variable, and then we are using the returned value in the content property of a ::before pseudo-element.
  • This will add a text before the h1 element with the length of the string.

You can use any other string function in the same way. Just pass the string variable or value as an argument to the function and use the returned value in your stylesheets.