刪除在SCSS從列表中的項目，但保留逗號

Question

我想從這個名單從波旁刪除「文本區域」：

$text-inputs-list: 'input[type="color"]', 
        'input[type="date"]', 
        'input[type="datetime"]', 
        'input[type="datetime-local"]', 
        'input[type="email"]', 
        'input[type="month"]', 
        'input[type="number"]', 
        'input[type="password"]', 
        'input[type="search"]', 
        'input[type="tel"]', 
        'input[type="text"]', 
        'input[type="time"]', 
        'input[type="url"]', 
        'input[type="week"]', 
        'input:not([type])', 
        'textarea'; 

$all-text-inputs:  assign-inputs($text-inputs-list); 

BTW，assign-inputs看起來是這樣的：

@function _assign-inputs(
    $inputs, 
    $pseudo: null 
) { 

    $list:(); 

    @each $input in $inputs { 
    $input: unquote($input); 
    $input: if($pseudo, $input + ":" + $pseudo, $input); 
    $list: append($list, $input, comma); 
    } 

    @return $list; 
} 

我找到了以下功能從這裏刪除項目：http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/

@function remove($list, $value, $recursive: false) { 
    $result:(); 

    @for $i from 1 through length($list) { 
    @if type-of(nth($list, $i)) == list and $recursive { 
     $result: append($result, remove(nth($list, $i), $value, $recursive)); 
    } 

    @else if nth($list, $i) != $value { 
     $result: append($result, nth($list, $i)); 
    } 
    } 

    @return $result; 
} 

所以我刪除了「textarea」它EM是這樣的：

$all-text-inputs-except-textarea: remove($all-text-inputs, 'textarea'); 

通常我會用$all-text-inputs這樣的：

#{$all-text-inputs} { 
    font-size: 12px; 
} 

這將拓展出：

input[type="email"], input[type="password"], ... { 
    font-size: 12px; 
} 

但是，當我以同樣的方式使用$all-text-inputs-except-textarea ：

#{$all-text-inputs-except-textarea} { 
    font-size: 12px; 
} 

相反，它擴展了到：

input[type="email"] input[type="password"] ... { 
    font-size: 12px; 
} 

注缺乏逗號分隔符。它變成一個大的嵌套的孩子選擇器。

我已成功地避免使用此功能的問題：

@function comma-delimit($list) { 
    $result:(); 
    @each $item in $list { 
    $result: append($result, $item, comma); 
    } 
    @return $result; 
} 

然後我做的：

$all-text-inputs-except-textarea: comma-delimit(remove($all-text-inputs, 'textarea')); 

然後$all-text-inputs-except-textarea有逗號，就像它的前身。

雖然，這感覺就像一個解決方法。沒有任何方法可以從列表中刪除項目，但如果有任何項目，則在列表中保留逗號？

Answer 1

將知識從the article you provided知識從Creating a comma-separated list of space-separated lists — erroneus append() behavior，我能修改remove功能，像這樣：

@function remove($list, $value, $recursive: false) { 
    $result:(); 

    @for $i from 1 through length($list) { 
    @if type-of(nth($list, $i)) == list and $recursive { 
     $result: append($result, remove(nth($list, $i), $value, $recursive)); 
    } 

    @else if nth($list, $i) != $value { 
     $result: append($result, nth($list, $i), comma); 
    } 
    } 

    @return $result; 
} 

$all-text-inputs-except-textarea: remove($all-text-inputs, 'textarea'); 

#{$all-text-inputs-except-textarea} { 
    font-size: 12px; 
} 

（注意comma關鍵字作爲額外的參數基本情況remove()）

以上產生你想要的輸出。

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]) { 
    font-size: 12px; 
} 

我創建a gist of the code您可以run on SassMeister。

Answer 2

Caleb的答案在我的特殊情況下運行良好。爲了簡化他的解決方案，我想確保在刪除項目後，空格分隔的列表仍然會被空格分隔。對於這一點，我用list_separator代替comma常數：

$result: append($result, nth($list, $i), list_separator($list)); 

所以最後變成了功能：

@function remove($list, $value, $recursive: false) { 
    $result:(); 

    @for $i from 1 through length($list) { 
    @if type-of(nth($list, $i)) == list and $recursive { 
     $result: append($result, remove(nth($list, $i), $value, $recursive)); 
    } 

    @else if nth($list, $i) != $value { 
     $result: append($result, nth($list, $i), list_separator($list)); 
    } 
    } 

    @return $result; 
}