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.