# Sorting Function

Sass does not provide any built-in way to sort a list of values. Thanks to string manipulation functions, we can build a function to sort a list of items following a given order.

If values to be sorted are numbers and numbers only, it ends up being quite easy because Sass can compare them natively.

### Sorting numbers

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

### Sorting numbers and strings

However, if you intend to sort strings as well as numbers, it involves quite a bit of complexity, so let’s do it one step at a time.

First, we need a sorting order.

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

Then, we need a helper function to determine which value comes first.

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

Last, but not least, we can build our sorting function. The most efficient implementation (that can be ported to Sass) is the quick sort algorithm.

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

If you are interested in the making of such a function, have a look at Implementing Bubble Sort algorithm with Sass at The Sass Way.