Sass không cung cấp bất kỳ cách tích hợp nào để sắp xếp danh sách các giá trị. Nhờ các hàm thao tác chuỗi, chúng ta có thể xây dựng một hàm để sắp xếp danh sách các mục theo một thứ tự nhất định.
Nếu các giá trị được sắp xếp chỉ là số và chữ số, thì kết quả là khá dễ dàng vì Sass có thể so sánh chúng nguyên bản.
Sắp xếp số
/// 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; )Sắp xếp số và chuỗi
Tuy nhiên, nếu bạn có ý định sắp xếp chuỗi cũng như số, nó liên quan đến một chút phức tạp, vì vậy hãy thực hiện từng bước một.
Đầu tiên, chúng ta cần một thứ tự sắp xếp.
/// 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;Sau đó, chúng ta cần một hàm trợ giúp để xác định giá trị nào đến trước.
/// 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); )Cuối cùng, nhưng không kém phần quan trọng, chúng ta có thể xây dựng chức năng sắp xếp của mình. Việc triển khai hiệu quả nhất (có thể được chuyển sang Sass) là thuật toán sắp xếp nhanh.
/// 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; )Nếu bạn quan tâm đến việc tạo ra một hàm như vậy, hãy xem phần Triển khai thuật toán Sắp xếp bong bóng với Sass tại The Sass Way.