Sortierfunktion

Sass bietet keine integrierte Möglichkeit, eine Liste von Werten zu sortieren. Dank String-Manipulationsfunktionen können wir eine Funktion erstellen, um eine Liste von Elementen nach einer vorgegebenen Reihenfolge zu sortieren.

Wenn die zu sortierenden Werte nur Zahlen sind, ist es ziemlich einfach, da Sass sie nativ vergleichen kann.

Zahlen sortieren

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

Zahlen und Zeichenketten sortieren

Wenn Sie jedoch auch Zeichenketten sortieren möchten, ist dies mit erheblichem Aufwand verbunden. Gehen wir es Schritt für Schritt an.

Zuerst benötigen wir eine Sortierreihenfolge.

/// Default order used to determine which string comes first
/// @type List
$default-order:
  "!" "#" "$" "%" "&" "'" "(" ")" "*" "+" "," "-" "." "/" "[" "\" "]" "^" "_" "{" "|" "}" "~"
  "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;

Dann benötigen wir eine Hilfsfunktion, um zu bestimmen, welcher Wert zuerst kommt.

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

Zuletzt, aber nicht zuletzt, können wir unsere Sortierfunktion erstellen. Die effizienteste Implementierung (die nach Sass portiert werden kann) ist der Quicksort-Algorithmus.

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

Wenn Sie sich für die Erstellung einer solchen Funktion interessieren, schauen Sie sich Implementing Bubble Sort algorithm with Sass bei The Sass Way an.