Tutorials

Sass str-length() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 31 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The str-length() function in Sass is an essential utility for working with strings. It allows you to determine the number of characters in a string, which can be particularly useful for various conditional logic or formatting needs in your stylesheets.

This function counts all characters, including spaces and special characters, providing an accurate length of the string.

💡 Syntax

The syntax of the str-length() function is simple. It takes a single argument:

Syntax

Copied

str-length(string)

🔢 Parameters

string: This is the input string whose length you want to calculate.

↩️ Return Value

The function returns an integer that represents the number of characters in the string.

📝 Example Usage

Let's look at some examples to see how str-length() can be used effectively in Sass.

📜 Example 1: Basic Usage

example.scss

Copied

$my-string: "Hello, World!";
$string-length: str-length($my-string);

body::after {
  content: "String length: #{$string-length}";
}

In this example, the string "Hello, World!" has 13 characters, including the comma and space. The length is stored in the $string-length variable and is displayed using the content property.

📜 Example 2: Using str-length() with Empty Strings

example.scss

Copied

$empty-string: "";
$string-length: str-length($empty-string);

body::before {
  content: "Empty string length: #{$string-length}";
}

Here, we check the length of an empty string. The str-length() function will return 0 for an empty string.

📜 Example 3: Using str-length() in Conditional Statements

example.scss

Copied

$input-string: "Sass is awesome!";

@if str-length($input-string) > 10 {
  .long-string {
    color: green;
  }
} @else {
  .short-string {
    color: red;
  }
}

In this example, the string length is checked to determine whether it is longer than 10 characters. Depending on the result, different styles are applied.

📜 Example 4: Calculating Length of Strings with Special Characters

example.scss

Copied

$special-string: "Café 💻";
$string-length: str-length($special-string);

footer::after {
  content: "Special string length: #{$string-length}";
}

This example demonstrates that str-length() accurately counts all characters, including special characters and spaces. Here, the string length will account for the accented "é" and the emoji.

🎉 Conclusion

The str-length() function in Sass is a straightforward yet powerful tool for determining the length of a string. It is particularly useful in scenarios where string length impacts the styling logic, such as truncating content, applying different styles based on string length, or simply debugging string values. By integrating str-length() into your Sass toolkit, you can enhance the flexibility and dynamism of your stylesheets.

Whether you’re checking the length of a user input string or dynamically adjusting styles based on content, str-length() is a function you’ll find yourself using frequently. Understanding its application will help you write more robust and adaptive Sass code.