Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass str-length() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 13 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass str-length() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy