función de clasificación | Programar Plus

Sass no proporciona ninguna forma integrada de ordenar una lista de valores. Gracias a las funciones de manipulación de cadenas, podemos construir una función para ordenar una lista de elementos siguiendo un orden determinado.

Si los valores a ordenar son números y solo números, termina siendo bastante fácil porque Sass puede compararlos de forma nativa.

Ordenar números

/// Quick sort
/// @author Sam Richards
/// @param {List} $list - list to sort
/// @return {List}
@function quick-sort($list) {
  $less:  ();
  $equal: ();
  $large: ();

  @if length($list) > 1 {
    $seed: nth($list, ceil(length($list) / 2));

    @each $item in $list {
      @if ($item == $seed) {
        $equal: append($equal, $item);
      } @else if ($item < $seed) {
        $less: append($less, $item);
      } @else if ($item > $SEED) {
        $large: append($large, $item);
      }
    }

    @return join(join(quick-sort($less, $order), $equal), quick-sort($large, $order));
  }

  @return $list;
}

Ordenar números y cadenas

Sin embargo, si tiene la intención de ordenar cadenas además de números, implica bastante complejidad, así que hagámoslo paso a paso.

Primero, necesitamos un orden de clasificación.

/// Default order used to determine which string comes first
/// @type List
$default-order:
  "!" "#" "$" "%" "&" "'" "(" ")" "*" "+" "," "-" "." "https://css-tricks.com/" "[" "" "]" "^" "_" "{" "|" "}" "~"
  "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"
  "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" !default;

Luego, necesitamos una función auxiliar para determinar qué valor viene primero.

/// Compares two string to determine which comes first
/// @access private
/// @param {String} $a - first string
/// @parem {String} $b - second string
/// @param {List} $order - order to deal with
/// @return {Bool}
@function _str-compare($a, $b, $order) {
  @if type-of($a) == "number" and type-of($b) == "number" {
    @return $a < $b;
  }

  $a: to-lower-case($a + unquote(""));
  $b: to-lower-case($b + unquote(""));

  @for $i from 1 through min(str-length($a), str-length($b)) {
    $char-a: str-slice($a, $i, $i);
    $char-b: str-slice($b, $i, $i);

    @if $char-a and $char-b and index($order, $char-a) != index($order, $char-b) {
      @return index($order, $char-a) < index($order, $char-b);
    }
  }

  @return str-length($a) < str-length($b);
}

Por último, pero no menos importante, podemos construir nuestra función de clasificación. La implementación más eficiente (que se puede trasladar a Sass) es el algoritmo de clasificación rápida.

/// Quick sort
/// @author Kitty Giraudel
/// @param {List} $list - list to sort
/// @param {List} $order [$default-order] - order to use for sorting
/// @return {List}
/// @require {function} _str-compare
/// @require $default-order
@function quick-sort($list, $order: $default-order) {
  $less:  ();
  $equal: ();
  $large: ();

  @if length($list) > 1 {
    $seed: nth($list, ceil(length($list) / 2));

    @each $item in $list {
      @if $item == $seed {
        $equal: append($equal, $item, list-separator($list));
      } @else if _str-compare($item, $seed, $order) {
        $less: append($less, $item, list-separator($list));
      } @else if not _str-compare($item, $seed, $order) {
        $large: append($large, $item, list-separator($list));
      }
    }

    @return join(join(quick-sort($less, $order), $equal), quick-sort($large, $order));
  }

  @return $list;
}

Si está interesado en crear una función de este tipo, eche un vistazo a Implementación del algoritmo Bubble Sort con Sass en The Sass Way.