具有动态参数的Sass混合

我有一个 donut.component.ts 我想用的 Input() 并在我的scss文件中使用它们。本质上,我想看看你是否能以某种方式将动态值用于mixin参数,或者是否有更好/更简单的方法。

我试过使用mixin(如下所示)和 var() &也试过使用 attr() 没有运气。不确定这是否可行,但我当时正在购物。提前感谢您的帮助!

import {
  Component,
  Input,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-donut',
  templateUrl: './donut.component.html',
  styleUrls: ['./donut.component.scss'],
})
export class DonutComponent implements OnInit {
  @Input() baseColor: string = '#ffffff';
  @Input() centerColor: string = null;
  @Input() label: string = 'Total units';
  @Input() progress: number = 75;
  @Input() radiusType: 'full' | 'semi';
  @Input() showLabel: boolean = false;
  @Input() size: number = 96;
  @Input() valColor: string = '#999999';

  constructor() {}
}

@mixin donut-chart($size, $val, $base-color, $val-color, $center-color: null) {
  $perc: $val * 3.6;
  // Donut chart
  .donut-chart {
    width: $size;
    height: $size;
    background-color: $base-color;
    background: conic-gradient($val-color 0deg, $val-color #{$perc}deg, $base-color #{$perc}deg);
    &:before {
      width: $size / 1.5;
      height: $size / 1.5;
      @if $center-color {
        background-color: $center-color;
      }
    }
    &:after {
      content: '#{$val}%';
      color: $center-label-color;
      font-size: $size / 6;
    }
  }
}

// Argument order: ( $size, $val, $base-color, $val-color, $center-color: null )
@include donut-chart(180px, 75, #ffffff, #999999);
// where these above values would be dymanic.

<div class="chart">
  <div class="donut-chart" style="
      --baseColor: {{ baseColor }};
      --centerColor: {{ centerColor }};
      --label: {{ label }};
      --progress: {{ progress }};
      --size: {{ size }};
      --valColor: {{ valColor }};
  "></div>
</div>