Sass 错误“函数 X 在没有@return 的情况下完成" [英] Sass error "Function X finished without @return"
问题描述
我在尝试将相当复杂的渐变转换为 SASS 的 mixin 时遇到了一些麻烦,大多数渐变都很好,而且我相信我的色标也正确,我相信这是我的 MIXIN 不允许的定位我这样做(左上,右下).
I'm having some trouble trying to convert a fairly complex gradient, into a mixin for SASS, most gradients are fine, and I believe my colour stops are also correct, I believe it's the positioning that my MIXIN doesn't let me do this (left top, right bottom).
我需要这个:
.progress.stripes.animate > .bar > span {
background-image: -webkit-gradient(
linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
要使用此 mixin:
@mixin linear-gradient($gradientLine, $colorStops...) {
background-color: nth($colorStops,1);
background-image: -webkit-gradient(linear, $gradientLine, $colorStops);
background-image: -webkit-linear-gradient($gradientLine, $colorStops);
background-image: -moz-linear-gradient($gradientLine, $colorStops);
background-image: -o-linear-gradient($gradientLine, $colorStops);
background: -ms-linear-gradient($gradientLine, $colorStops);
@if length($colorStops) == 2 {
$colour1:nth($colorStops,1);
$colour2:nth($colorStops,2);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$colour1}', endColorstr='#{$colour2}',GradientType=0 );
}
@if length($gradientLine) == 2 {
background-image: linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
} @else {
background-image: linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
}
}
这是我尝试过的,但不起作用...
$grad: rgba(255, 255, 255, .2);
.progress.stripes.animate > .bar > span {
@include linear-gradient((left top, right bottom),$grad 25%, $transparent 25%, $transparent 5%, $grad 5%, $grad 75%, $transparent 75%);
}
推荐答案
Sass 在错误消息中告诉您这不起作用的原因:Function inverse-side finished without @return.
Sass is telling you the reason this isn't working in the error message: Function inverse-side finished without @return.
@function inverse-side($side) {
@if $side == top {
@return bottom;
}
@else if $side == bottom {
@return top;
}
@else if $side == left {
@return right;
}
@else if $side == right {
@return left;
}
}
您在这里只考虑了 4 个条件:上、右、下、左.有第五个选项被忽略了:以上都不是.如果应该只有 4 个选项,那么您需要 3 个 if/else 块和最后一个返回值,这就是您的全部.
You're only accounting for 4 conditions here: top, right, bottom, left. There's a 5th option that's being overlooked: none of the above. If there should only be 4 options, then you want 3 if/else blocks and a return value at the very end that's your catch all.
@function inverse-side($side) {
@if $side == top {
@return bottom;
}
@else if $side == bottom {
@return top;
}
@else if $side == left {
@return right;
}
@return left;
}
这篇关于Sass 错误“函数 X 在没有@return 的情况下完成"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!