Estoy tratando de eliminar "textarea" de esta lista de Bourbon:

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

Por cierto, assign-inputs se ve así:

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

Encontré la siguiente función para eliminar elementos de aquí: 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;
}

Así que elimino el elemento "textarea" como este:

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

Normalmente usaría $all-text-inputs así:

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

Y eso se expandiría a:

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

Pero cuando uso $all-text-inputs-except-textarea de la misma manera:

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

En cambio, se expande a:

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

Tenga en cuenta la falta de delimitadores de coma. Se convierte en un gran selector de niños anidado.

He logrado evitar el problema con esta función:

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

Y luego hago:

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

Y luego $all-text-inputs-except-textarea tiene comas, al igual que su predecesor.

Aunque parece una solución. ¿No hay alguna forma de eliminar elementos de una lista, pero conservar las comas en la lista si hay alguna?

0
Jackson 15 dic. 2016 a las 00:41

2 respuestas

La mejor respuesta

Combinando el conocimiento de el artículo que proporcionaste con el conocimiento de Creación de una lista separada por comas de listas separadas por espacios - comportamiento de append () erróneo, pude modificar su función remove así:

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

(tenga en cuenta la palabra clave comma como argumento adicional para el caso base en remove())

Lo anterior produce la salida que desea.

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

Creé un resumen del código que puedes ejecutar en SassMeister.

1
Community 23 may. 2017 a las 11:53

La respuesta de Caleb funcionó bien en mi escenario particular. Para generalizar ligeramente su solución, quería asegurarme de que, además, las listas separadas por espacios seguirían estando separadas por espacios después de eliminar un elemento. Para esto, usé list_separator en lugar de la constante comma:

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

Entonces la función final se convirtió en:

@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;
}
0
Jackson 15 dic. 2016 a las 17:00