css - Scss 函数中的嵌套 if 语句

Question

我想将两个值传递给函数“sprite-chooser()”，这样我就可以选择要加载的 Sprite 是亮背景还是暗背景。在加载 sprite 之前，我需要首先检查它是哪个 UI - 所以我有两个 @if 语句和嵌套的 @if 语句，但收到一条错误消息:语法错误:函数 sprite-chooser finished without @return.

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