@function中的SCSS中的嵌套列表

Question

試圖弄清楚爲什麼這段代碼不能按我喜歡的方式工作。如果我在@mixin中聲明瞭相同的函數，它可以很好地工作。但是因爲我目前正在開發一個微框架，所以我想將它保留爲@function，因爲它將在代碼中多次重用。下面的代碼顯然被剝離了下來，但希望你能夠根據傳遞的$類型得到我需要的@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「假」。謝謝！

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