Setting width with CSS attr

Question

Im trying to set the width of an element using attr() in SASS, but its not working.

When I remove width: attr(data-width px); and background-color: attr(data-background-color); and instead write background-color: red; and width: 20%; it works.

Working Progress bar without attr (JSFiddle): https://jsfiddle.net/9n0hdLwh/1/

    <div class="info-container-item-progrssbar-bar info-container-item-progrssbar-bar-color">
           <div class="info-container-item-progrssbar-bar-inner" data-width="10" data-background-color="#FFF"></div>
    </div>

    .info-container-item-progrssbar-bar {
      border-radius: 10px;
      width: 20%;
      margin: 20px 0 0 0;
      overflow: hidden;
      &.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;
      }
    }