Question

我在sass中创建了一个进度圈，但我必须在打字稿中设置他的百分比。那么在sass中如何分配呢？

所以我的HTML：

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

现在我有这个变量：

$percent-to-show

它只需要一个数字。 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-to-show

中加上一个数字

将值从typescript传递给sass

0 个答案: