Escaping percentage character in Sass (SCSS)

Question

I have a question surrounding semantics.

I am working with a long list of variables in Sass (it's a large number of color swatches and corresponding tints). These colors have to be precise and so lighten() and darken() functions don't suit in this scenario.

The variables I'm currently declaring read like the following:

$black-13-percent-tint, $black-21-percent-tint, etc.

I stumbled across this article, got excited, and slightly misinterpreted what the article was saying. I then began trying to declare Sass variables like the following:

$black-13\%-tint, $black-21\%-tint, etc.

After realizing my error (mixing up class names and Sass variables) I started to wonder if it was possible to escape the % symbol in a Sass variable?

Essentially I would like to write Sass like the following example and I am wanting to know if it is possible to achieve this?

.black-13\%-tint-swatch { background: $black-13\%-tint; }

Answer 1

You can use #{'%'}, that worked for me :)