Šķirošanas funkcija CSS-triki

Anonim

Sass nenodrošina nevienu iebūvētu veidu, kā kārtot vērtību sarakstu. Pateicoties virkņu manipulācijas funkcijām, mēs varam izveidot funkciju, lai kārtotu vienumu sarakstu pēc noteiktā secībā.

Ja kārtojamās vērtības ir tikai skaitļi un skaitļi, galu galā tas ir diezgan viegli, jo Sass var tos dabiski salīdzināt.

Ciparu kārtošana

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

Ciparu un virkņu kārtošana

Tomēr, ja jūs plānojat kārtot virknes, kā arī skaitļus, tas ir saistīts ar nelielu sarežģītību, tāpēc darīsim to pa vienam solim.

Pirmkārt, mums ir nepieciešama šķirošanas kārtība.

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

Tad mums ir nepieciešama palīga funkcija, lai noteiktu, kura vērtība ir pirmā.

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

Visbeidzot, bet ne mazāk svarīgi, mēs varam izveidot savu šķirošanas funkciju. Visefektīvākā ieviešana (ko var pārnest uz Sass) ir ātrās kārtošanas algoritms.

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

Ja jūs interesē šādas funkcijas izveidošana, apskatiet Bubble Sort algoritma ieviešanu ar Sass vietnē The Sass Way.