title: WebPack SCSS error "uknown word" on variable used as keyframe step percentage
body: <p>The error Webpack (version 4.0.0) throws:  </p>
  
  <pre><code>ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
  Module build failed: Unknown word (740:5)
  
    738 |   }
    739 | 
  &gt; 740 |   #{$pulse-percent} {
        |     ^
    741 |     background-position: $mask-right-end 0;
    742 |   }  
  </code></pre>
  
  <p>The relevant SCSS:      </p>
  
  <pre><code>// simplified for this question...
  $pulse-percent: .6 / 5 * 100%;
  
  @keyframes pulseBG {
    // other steps...
  
    // ERROR on this line
    #{$pulse-percent} {
      background-position: $mask-right-end 0;
    }
  
    // other steps...    
  }
  </code></pre>
  
  <p>The syntax I'm using is from <a href="https://stackoverflow.com/a/31084393/870729">this answer</a>.  </p>
  
  <p>I've tried a several syntax variations with no luck:</p>
  
  <pre><code>// throws "expect ':' after $pulse-percent in assignment statement
  $pulse-percent { 
  
  // throws "unknown word"
  {$pulse-percent} {
  
  // throws "unknown word"
  #{( $variable1 / $variable2 * 100% )} {
  </code></pre>
  
  <p>Other resources on Google that I have found don't seem to address this scenario, and / or seem outdated.</p>
  
  <p>Other variables are being processed properly.</p>
  
  <p>Any "interpolation" syntax I try to use fails.  Another line in my SCSS that fails is <code>animation: #{$pulse-interval} pulseBG 1s linear infinite;</code></p>
  
  <p><em>Yes, it's a silly CSS animation in a serious web application.</em><br>
  <em>Yes, I could just enter the values to work around the problem.</em><br>
  But, I'd like to understand the problem and how to resolve it.</p>