Angular 将值从typescript传递到sass

我正在用sass创建一个进度循环，但我必须用typescript设置他的百分比。那么在sass中，如何分配给它

因此，我的html：

    <ion-range class="circular-progress" min="40" max="200" step="1" pin="true" color="primary" [(ngModel)]="rate">.......
.................

它只需要一个数字。html中的数字是

{{rate}}

，因此我需要将其分配给sass中的变量，以便以typescript或html的形式发送。但我不知道怎么做

我正在使用打字脚本。 我的班级是：

.circular-progress {
  //circular-progress function
  //circular-progress($maxPercent, $percent, $color-bar, $color-back);
  background: circular-progress(100, $percent-to-show, #03A9F4, #E0E0E0);

  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  width: 200px;
  transition: all .3s linear;

  &::before {
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    color: rgba(black,.54);
    content: '#{$percent-to-show}%';
    font-size: 72px;
    font-weight: bold;
    height: 100%;
    left: 0;
    line-height: 200px;
    position: absolute;
    text-align: center;
    top: 0;
    transform: scale(.87);
    width: 100%;
  }
}

---

我想在

$percent中输入一个数字，以显示
SASS是一个预处理器。在运行中的应用程序中并没有SASS。所以这不是我想要实现的方法吗？SASS创建简单的CSS。您需要设置适当的CSS样式。也许你可以从你的SASS文件中发布这一行。你可以在HTML中添加一个样式属性，然后用JS@YounesM我使用的是typescriptSASS，它是一个预处理器。在运行中的应用程序中并没有SASS。所以这不是我想要实现的方法吗？SASS创建简单的CSS。您需要设置适当的CSS样式。也许你可以从你的SASS文件中发布这一行。你可以在HTML中添加一个样式属性，然后用JS@YounesM我在用打字脚本
.circular-progress {
  //circular-progress function
  //circular-progress($maxPercent, $percent, $color-bar, $color-back);
  background: circular-progress(100, $percent-to-show, #03A9F4, #E0E0E0);

  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  width: 200px;
  transition: all .3s linear;

  &::before {
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    color: rgba(black,.54);
    content: '#{$percent-to-show}%';
    font-size: 72px;
    font-weight: bold;
    height: 100%;
    left: 0;
    line-height: 200px;
    position: absolute;
    text-align: center;
    top: 0;
    transform: scale(.87);
    width: 100%;
  }
}