Sass no proporciona ninguna forma incorporada de ordenar una lista de valores. Gracias a las funciones de manipulación de cadenas, podemos construir una función para ordenar una lista de elementos siguiendo un orden determinado.
Si los valores a ordenar son números y solo números, termina siendo bastante fácil porque Sass puede compararlos de forma nativa.
Ordenar números
/// 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; )Ordenar números y cadenas
Sin embargo, si tiene la intención de ordenar cadenas además de números, implica bastante complejidad, así que hagámoslo paso a paso.
Primero, necesitamos un orden de clasificación.
/// 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;Entonces, necesitamos una función auxiliar para determinar qué valor viene primero.
/// 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); )Por último, pero no menos importante, podemos construir nuestra función de clasificación. La implementación más eficiente (que se puede portar a Sass) es el algoritmo de clasificación rápida.
/// 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; )Si está interesado en la creación de una función de este tipo, eche un vistazo a Implementación del algoritmo Bubble Sort con Sass en The Sass Way.