Ionic 4 - 如何创建 SCSS 自定义 mixin

Question

我以这种方式创建了一个自定义 mixin：

@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);