Tutorials

Sass quote() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

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

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

$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

$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

$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

$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.