title: Setting width with CSS attr
body: <p>Im trying to set the width of an element using attr() in SASS, but its not working. </p>
  
  <p>When I remove <code>width: attr(data-width px);</code> and <code>background-color: attr(data-background-color);</code> and instead write <code>background-color: red;</code> and <code>width: 20%;</code> it works.</p>
  
  <p>Working Progress bar without attr (JSFiddle): <a href="https://jsfiddle.net/9n0hdLwh/1/" rel="nofollow noreferrer">https://jsfiddle.net/9n0hdLwh/1/</a></p>
  
  <pre><code>    &lt;div class="info-container-item-progrssbar-bar info-container-item-progrssbar-bar-color"&gt;
             &lt;div class="info-container-item-progrssbar-bar-inner" data-width="10" data-background-color="#FFF"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      .info-container-item-progrssbar-bar {
        border-radius: 10px;
        width: 20%;
        margin: 20px 0 0 0;
        overflow: hidden;
        &amp;.info-container-item-progrssbar-bar-color {
          background-color: darken(blue, 1%);
        }
        .info-container-item-progrssbar-bar-inner {
          border-radius: 10px;
          width: attr(data-width px);
          height: 8px;
          background-color: attr(data-background-color);
          position: relative;
        }
      }
  </code></pre>