Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass unquote() Function

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

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

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