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.

There’s an error in the quick-sort function:

line 17:

`@else if $seed > $item {`

should rather be`@else if $item > $seed`

. You accidentally swapped both the arguments and the operator ;)