Ionic framework 爱奥尼亚4-如何创建SCSS自定义混音器
我以这种方式创建了一个自定义混音器:Ionic framework 爱奥尼亚4-如何创建SCSS自定义混音器,ionic-framework,sass,Ionic Framework,Sass,我以这种方式创建了一个自定义混音器: @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 {
@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
您必须将mixin所在的文件导入到通过
@include
调用它的文件中
所以,有点像
@import "../mixins/donut-chart.scss";
@include donut-chart('.chart1', 75, 70px, 5px, #CCC, #999, #666, #333, 10);