Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass quote() Function

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

Photo Credit to CodeToFun

🙋 Introduction

The quote() function in Sass is a simple yet useful tool for working with strings. It allows you to add quotation marks around a string, ensuring that the string is treated as a quoted value in the generated CSS.

This can be particularly helpful when working with content that needs to be output as a string in CSS, such as font family names, content properties, or URLs.

💡 Syntax

The syntax of the quote() function is straightforward. It takes a single argument:

Syntax
Copied
Copy To Clipboard
quote(string)

đŸ”ĸ Parameters

  • string: This is the string that you want to wrap in quotation marks. The string can be any text or content that you want to ensure is quoted in the output CSS.

↩ī¸ Return Value

The quote() function returns the input string wrapped in double quotes.

📝 Example Usage

Let's explore some examples to see how quote() can be used in different scenarios.

📜 Example 1: Quoting a Simple String

example.scss
Copied
Copy To Clipboard
$font-name: quote("Open Sans");

body {
  font-family: $font-name;
}

In this example, the string "Open Sans" is explicitly quoted. The quote() function ensures that the font family name is output with double quotes, which is essential for CSS syntax in cases where the font name contains spaces.

📜 Example 2: Quoting a URL

example.scss
Copied
Copy To Clipboard
$image-path: quote("/images/logo.png");

.header {
  background-image: url(#{$image-path});
}

Here, the quote() function is used to ensure that the URL string is properly quoted. This is particularly useful when constructing URLs dynamically in Sass.

📜 Example 3: Ensuring Content Strings Are Quoted

example.scss
Copied
Copy To Clipboard
$before-content: quote("→");

a::before {
  content: $before-content;
}

This example demonstrates how the quote() function is used to ensure that the content property is properly quoted, which is crucial for CSS content generation.

📜 Example 4: Quoting an Unquoted String

example.scss
Copied
Copy To Clipboard
$unquoted-string: OpenSans;
$quoted-string: quote($unquoted-string);

p {
  font-family: $quoted-string;
}

In this example, an unquoted string OpenSans is passed to the quote() function to ensure it is quoted when used in the CSS output.

🎉 Conclusion

The quote() function in Sass is a handy tool for ensuring that strings are properly quoted in the generated CSS. Whether you're working with font names, URLs, or content strings, quote() helps you maintain proper syntax and avoid potential issues with unquoted strings.

By using quote(), you can ensure that your strings are treated correctly in your stylesheets, leading to more reliable and consistent CSS output. It's a simple function, but one that plays an important role in managing string values in Sass.

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