Tutorials

Sass to-upper-case() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 39 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The to-upper-case() function in Sass is a string function that converts all the characters in a string to uppercase.

This function is particularly useful when you need to standardize or manipulate text in your styles, ensuring consistency across your design.

💡 Syntax

The syntax of the to-upper-case() function is straightforward, requiring only a single argument:

Syntax

Copied

to-upper-case(string)

🔢 Parameters

string: The input string that you want to transform into uppercase letters.

↩️ Return Value

The function returns a new string with all the characters converted to uppercase.

📝 Example Usage

Let's look at some examples to see how to-upper-case() can be applied in various scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$lowercase-string: "hello world";
$uppercase-string: to-upper-case($lowercase-string);

.content {
  text-transform: $uppercase-string; // Outputs "HELLO WORLD"
}

In this example, the string "hello world" is converted to "HELLO WORLD" using the to-upper-case() function.

📜 Example 2: Using with Variables

example.scss

Copied

$button-text: "submit";
$button-text-uppercase: to-upper-case($button-text);

button {
  content: $button-text-uppercase; // Outputs "SUBMIT"
}

This example shows how you can convert a variable containing lowercase text into uppercase before using it in your styles.

📜 Example 3: Dynamic Class Names

example.scss

Copied

$base-name: "primary";
$uppercase-class: to-upper-case($base-name);

.#{$uppercase-class}-button {
  background-color: blue;
  color: white;
}

In this scenario, the base string "primary" is converted to "PRIMARY", which is then used dynamically to create a class name.

🎉 Conclusion

The to-upper-case() function in Sass is a handy utility for transforming text to uppercase. Whether you're working with dynamic class names, standardizing text content, or simply ensuring uniformity in your styles, to-upper-case() provides a simple and effective way to manage text case in your Sass projects.

Mastering this function can help you streamline your code and maintain consistency across your web design, making your styles more robust and easier to maintain.