删除在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; 
}