Sass не предоставляет встроенного способа сортировки списка значений. Благодаря функциям обработки строк мы можем создать функцию для сортировки списка элементов в заданном порядке.
Если значения для сортировки представляют собой только числа и числа, это оказывается довольно просто, потому что Sass может сравнивать их изначально.
Сортировка чисел
/// 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) ( $large: append($large, $item); ) ) @return join(join(quick-sort($less, $order), $equal), quick-sort($large, $order)); ) @return $list; )Сортировка чисел и строк
Однако, если вы намереваетесь сортировать как строки, так и числа, это связано с некоторой сложностью, поэтому давайте делать это по одному шагу за раз.
Во-первых, нам нужен порядок сортировки.
/// 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;Затем нам понадобится вспомогательная функция, чтобы определить, какое значение будет первым.
/// 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); )И последнее, но не менее важное: мы можем создать нашу функцию сортировки. Самая эффективная реализация (которую можно перенести на Sass) - это алгоритм быстрой сортировки.
/// Quick sort /// @author Hugo 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; )Если вы заинтересованы в создании такой функции, ознакомьтесь с «Реализацией алгоритма пузырьковой сортировки с помощью Sass» на сайте The Sass Way.