Html 使用CSS属性设置宽度

我试图在SASS中使用attr（）设置元素的宽度，但它不起作用

当我移除

宽度时：attr（数据宽度px）和
背景色：attr（数据背景色）并改为写
背景色：红色和<代码>宽度：20%它可以工作

不带属性的工作进度条（JSFIDLE）：


.info容器项目进度栏{
边界半径：10px；
宽度：20%；
利润率：20px0；
溢出：隐藏；
&.info容器项目进度栏颜色{
背景色：深色（蓝色，1%）；
}
.info容器项目进度栏内部{
边界半径：10px；
宽度：attr（数据宽度px）；
高度：8px；
背景色：attr（数据背景色）；
位置：相对位置；
}
}
相关（如果不重复）-支持-
    <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;
      }
    }