Escaping percentage character in Sass (SCSS)
<p>I have a question surrounding semantics.</p>

<p>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 <code>lighten()</code> and <code>darken()</code> functions don't suit in this scenario.</p>

<p>The variables I'm currently declaring read like the following:</p>

<p><code>$black-13-percent-tint</code>, <code>$black-21-percent-tint</code>, etc.</p>

<p>I stumbled across <a href="https://mathiasbynens.be/notes/html5-id-class" rel="noreferrer">this article</a>, got excited, and slightly misinterpreted what the article was saying. I then began trying to declare Sass variables like the following:</p>

<p><code>$black-13\%-tint</code>, <code>$black-21\%-tint</code>, etc.</p>

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

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

<p><code>.black-13\%-tint-swatch {
  background: $black-13\%-tint;
}</code></p>