Question

试图弄清楚为什么这段代码不能按照我的意愿运行。如果我在@mixin中声明相对相同的函数，它可以完美地工作;但由于我目前正在开发一个微框架，我想将其保留为@function，因为它将在代码中多次重复使用。下面的代码显然已被删除，但希望你能根据传递的$ type获得我需要的@function到@return。

$config:
desktop 16 1280px,
laptop 12 960px,
tablet 8 640px,
mobile 4 320px;

@function run($type) {
    @each $list in $config {
        $alias: nth($list, 1);
        $columns: nth($list, 2);
        $break: nth($list, 3);

        @if $type == $alias {
            @return $break;
        } @else if $type == $columns {
            @return $columns;
        } @else if $type == $break {
            @return $alias;
        } @else { @return false; }
    }
} 

@debug run(desktop);

// returns '1280px' in command line, like it should.

@debug run(mobile);

// returns 'false'
// it should return '320px', as with 'desktop'?

这可能是一个简单的解决方案，但如果可能的话，解释为什么它会在除“桌面”之外的所有内容上保持@returning'false'。谢谢！

Answer 1

您应该将return: false;移出@each循环，否则函数将尝试在每次迭代时返回false，而不会找到匹配（即跳出循环）。

@function run($type) {
    @each $list in $config {
        $alias: nth($list, 1);
        $columns: nth($list, 2);
        $break: nth($list, 3);

        @if $type == $alias {
            @return $break;
        } @else if $type == $columns {
            @return $columns;
        } @else if $type == $break {
            @return $alias;
        }
    }
    @return false;
}

在@function中的SCSS中的嵌套列表

1 个答案: