Ionic 4-如何创建SCSS自定义混合

Question

我以这种方式创建了一个定制的混音：

@mixin donut-chart($name, $perc, $size, $width, $base, $center, $color, $textColor: $color, $textSize: 40px) {

  $color2: $color;
  $base2: $base;
  $deg: ($perc/100*360)+deg;
  $deg1: 90deg;
  $deg2: $deg;

  @if $perc < 50 {
    $base: $color;
    $color: $base2;
    $color2: $base2;
    $deg1: ($perc/100*360+90)+deg;
    $deg2: 0deg;
  }

  .donut-chart {
    &#{$name} {
      width: $size;
      height: $size;
      background: $base;

      .slice {
        &.one {
          clip: rect(0 $size $size/2 0);
          -webkit-transform: rotate($deg1);
          transform: rotate($deg1);
          background: $color;
        }

        &.two {
          clip: rect(0 $size/2 $size 0);
          -webkit-transform: rotate($deg2);
          transform: rotate($deg2);
          background: $color2;
        }
      }

      .chart-center {
        top: $width;
        left: $width;
        width: $size - ($width * 2);
        height: $size - ($width * 2);
        background: $center;

        span {
          font-size: $textSize;
          line-height: $size - ($width * 2);
          color: $textColor;
          &:after {
            content: '#{$perc}%';
          }
        }
      }
    }
  }
}

它可以这样工作：

@include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);

因此，只有当我将mixin放在与@include相同的SCSS文件中时，它才能起作用。

有没有办法把mixin放在一个外部文件中，这样我就可以在很多地方重用它？

我尝试在主题文件夹、variables.scss文件和globals.scss文件中使用@import，但总是显示以下错误：

[ng] @include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);
[ng]         ^
[ng]       No mixin named donut-chart

Answer 1

您必须将mixin所在的文件导入到通过@include调用它的文件中。

所以，像这样的东西...

@import "../mixins/donut-chart.scss";

@include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);