scss mixin 中的错误 - “...”之后的 CSS 无效：预期的“...”，是“...”

变量名不能以数字开头，替换为：

.radial-progress {
  $circle-size: 50px;
  $circle-background: #d6dadc;
  $circle-color: #97a71d;
  $inset-size: 30px;
  $inset-color: #fbfbfb;
  $transition-length: 1s;
  $shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
  $percentage-color: #97a71d;
  $percentage-font-size: 22px;
  $percentage-text-width: 57px;
  // margin: 50px;
  width: $circle-size;
  height: $circle-size;
  background-color: $circle-background;
  border-radius: 50%;
  .circle {
    .mask,
    .fill,
    .shadow {
      width: $circle-size;
      height: $circle-size;
      position: absolute;
      border-radius: 50%;
    }
    .shadow {
      box-shadow: $shadow inset;
    }
    .mask,
    .fill {
      -webkit-backface-visibility: hidden;
      transition: -webkit-transform $transition-length;
      transition: -ms-transform $transition-length;
      transition: transform $transition-length;
      border-radius: 50%;
    }
    .mask {
      clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
      .fill {
        clip: rect(0px, $circle-size/2, $circle-size, 0px);
        background-color: $circle-color;
      }
    }
  }
  .inset {
    width: $inset-size;
    height: $inset-size;
    position: absolute;
    margin-left: ($circle-size - $inset-size)/2;
    margin-top: ($circle-size - $inset-size)/2;
    background-color: $inset-color;
    border-radius: 50%;
    box-shadow: $shadow;
    .percentage {
      height: $percentage-font-size;
      width: $percentage-text-width;
      overflow: hidden;
      position: absolute;
      top: ($inset-size - $percentage-font-size) / 2;
      left: ($inset-size - $percentage-text-width) / 2;
      line-height: 1;
      .numbers {
        margin-top: -$percentage-font-size;
        transition: width $transition-length;
        span {
          width: $percentage-text-width;
          display: inline-block;
          vertical-align: top;
          text-align: center;
          font-weight: 800;
          font-size: $percentage-font-size;
          // font-family:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
          color: $percentage-color;
        }
      }
    }
  }
  $deg180: 180deg;
  $size100: 100;
  $i: 0;
  $increment: #{$deg180}/#{$size100};
  .loop ($i) when ($i <=100) {
    &[data-progress="${i}"] {
      .circle {
        .mask.full,
        .fill {
          -webkit-transform: rotate($increment * $i);
          -ms-transform: rotate($increment * $i);
          transform: rotate($increment * $i);
        }
        .fill.fix {
          -webkit-transform: rotate($increment * $i * 2);
          -ms-transform: rotate($increment * $i * 2);
          transform: rotate($increment * $i * 2);
        }
      }
      .inset .percentage .numbers {
        width: $i * $percentage-text-width + $percentage-text-width;
      }
    }
    .loop($i + 1);
  }
  .loop($i);
}

总的来说，一项快速研究得出了以下结果：

$i: 0;
$increment: 180deg / 100;
@for $i from 1 through 100 {
  &[data-progress="#{$i}"] {
    .circle {
      .mask.full,
      .fill {
        -webkit-transform: rotate($increment * $i);
        -ms-transform: rotate($increment * $i);
        transform: rotate($increment * $i);
      }
      .fill.fix {
        -webkit-transform: rotate($increment * $i * 2);
        -ms-transform: rotate($increment * $i * 2);
        transform: rotate($increment * $i * 2);
      }
    }
    .inset .percentage .numbers {
      width: $i * $percentage-text-width + $percentage-text-width;
    }
  }
}