Sass String
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:
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
$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
$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
$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
$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:
Author
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
If you have any doubts regarding this article (Sass unquote() Function), please comment here. I will help you immediately.