Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass to-upper-case() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 22 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass to-upper-case() Function

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

👨‍đŸ’ģ 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