Question

我想将两个值传递给函数“sprite-chooser（）”，以便我可以选择加载哪个精灵，如果它在浅色或深色背景上。在加载精灵之前，我需要先检查它是哪个UI - 所以我在里面有两个@if语句和嵌套的@if语句，但是出现错误：语法错误：函数sprite-chooser没有完成@return。< / p>

@function sprite-chooser($ui-for, $bg-color) {
    @if ($ui-for == "ui-1") {
        @if (lightness( $bg-color ) > 60 and $ui-for == "ui-1") {
            @return #{$sprite-dark-ui-1};
        }    
        @else {
            @return #{$sprite-light-ui-1};
        }
    }
    @else if ($ui-for == "ui-2") {
        @if (lightness( $bg-color ) > 60 and $ui-for == "ui-2") {
            @return #{$sprite-dark-ui-2};
        }
        @else {
            @return #{$sprite-light-ui-2};
        }
    }
}

$background-color: #fff;
.class-name {
    background: url(sprite-chooser("ui-1", $background-color)) 0 0 no-repeat;
}

Answer 1

您需要另一个else案例

...
    @else if ($ui-for == "ui-2") {
        @if (lightness( $bg-color ) > 60 and $ui-for == "ui-2") {
            @return #{$sprite-dark-ui-2};
        }
        @else {
            @return #{$sprite-light-ui-2};
        }
    }
    @else { @return null; }
}

Scss在函数中嵌套if语句

1 个答案: