Question

我想删除＆＃34; textarea＆＃34;来自波旁的这份清单：

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

所以我删除了＆＃34; textarea＆＃34;像这样的项目：

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

从SCSS中的列表中删除项目但保留逗号

2 个答案: