SASS Interpolation

Syntax

Sass Interpolation allows you to add a Sass variable inside an existing string while preserving the quotes. Here is the syntax for Sass Interpolation:

#{variable}

Example

$color: red;

.error-message {
  color: #{"#{$color}-text"};
}

Output

.error-message {
  color: red-text;
}

Explanation

In the above example, we are using Sass Interpolation #{"#{$color}-text"} to combine a string with a variable. The variable $color holds a value of "red". The #{} syntax is used to evaluate the Sass variable within the string. This evaluates to "red-text".

The final compiled CSS output is .error-message { color: red-text; }. The resulting color, red-text, can be used as a class name or selector to apply color to a particular element in the HTML.

Use

Sass Interpolation is useful when you need to concatenate strings and variables in Sass. It can be used to create more dynamic classes and selectors in your CSS. It can also be used to create more complex CSS selectors, such as pseudo-selectors with dynamic content.

Important Points

• Sass Interpolation is used to evaluate a Sass variable within a string.
• The Sass Interpolation syntax is #{variable}.
• Sass Interpolation preserves the quotes around the string.
• Sass Interpolation is useful for creating dynamic selectors in CSS.

Summary

Sass Interpolation is a powerful tool that allows you to evaluate a variable within a string. It is useful for concatenating strings and variables in your CSS, and for creating dynamic selectors. Using Sass Interpolation can make your Sass code more concise and easier to maintain.