Sass unquote() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 131 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In Sass, the unquote() function is used to remove quotation marks from a string. This function is particularly useful when you need to work with string values that are dynamically generated or when dealing with quoted strings in your stylesheets. By removing the quotes, you can use these strings in a more flexible way within your Sass code.

💡 Syntax

The syntax for the unquote() function is quite simple. It takes a single argument:

Syntax

Copied

unquote(string)

🔢 Parameters

string: The input string value enclosed in quotes.

↩️ Return Value

The function returns the string without any surrounding quotation marks.

📝 Example Usage

Here are some practical examples to illustrate how the unquote() function can be used.

📜 Example 1: Basic Usage

example.scss

Copied

$quoted-string: "Hello, World!";
$unquoted-string: unquote($quoted-string);

body {
  content: $unquoted-string;
}

In this example, the string "Hello, World!" is converted to Hello, World! by removing the quotes. This is useful when you need to use the string value in a CSS property.

📜 Example 2: Dynamic String Handling

example.scss

Copied

$base-url: "https://example.com/";
$path: "images/logo.png";
$full-url: unquote($base-url) + $path;

a {
  background-image: url($full-url);
}

Here, unquote() is used to remove quotes from $base-url, allowing you to concatenate it with $path to form a complete URL.

📜 Example 3: Combining with Functions

example.scss

Copied

$font-family: unquote("Arial, sans-serif");

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

In this example, unquote() is used to remove quotes from a font family string, ensuring that the font-family property is correctly formatted for CSS.

📜 Example 4: Using with Maps

example.scss

Copied

$fonts: (
  "default": "Arial, sans-serif",
  "heading": "Georgia, serif"
);

$default-font: unquote(map-get($fonts, "default"));

h1 {
  font-family: $default-font;
}

The unquote() function is used here to ensure that the font-family value retrieved from a map is properly formatted without quotes.

🎉 Conclusion

The unquote() function in Sass is a valuable tool for manipulating strings by removing surrounding quotation marks. Whether you are working with dynamically generated strings, combining values, or retrieving strings from maps, unquote() helps ensure that your strings are formatted correctly for use in CSS.

Understanding how to use unquote() can simplify your Sass code and enhance your ability to handle strings effectively. By incorporating this function into your workflow, you can manage string values with greater precision and flexibility.

Experiment with unquote() in your Sass projects to see how it can streamline your code and improve your styling processes.