title: Escaping percentage character in Sass (SCSS)
body: <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>