छँटाई समारोह - सीएसएस-ट्रिक्स

Sass मानों की सूची को सॉर्ट करने के लिए कोई अंतर्निहित तरीका प्रदान नहीं करता है। स्ट्रिंग हेरफेर कार्यों के लिए धन्यवाद, हम दिए गए आदेश का पालन करते हुए मदों की एक सूची को सॉर्ट करने के लिए एक फ़ंक्शन का निर्माण कर सकते हैं।

यदि छांटे जाने वाले मान केवल संख्याएँ हैं और संख्याएँ हैं, तो यह काफी आसान है क्योंकि सास उनकी तुलना मूल रूप से कर सकती है।

क्रमबद्ध संख्याएँ

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

क्रमबद्ध संख्या और तार

हालाँकि, यदि आप स्ट्रिंग्स के साथ-साथ संख्याओं को क्रमबद्ध करना चाहते हैं, तो इसमें काफी जटिलता शामिल है, तो चलिए एक समय में इसे एक चरण में करते हैं।

सबसे पहले, हमें एक क्रमबद्ध क्रम की आवश्यकता है।

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

फिर, हमें यह निर्धारित करने के लिए एक सहायक फ़ंक्शन की आवश्यकता है कि कौन सा मूल्य पहले आता है।

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

अंतिम, लेकिन कम से कम, हम अपने छँटाई समारोह का निर्माण कर सकते हैं। सबसे कुशल कार्यान्वयन (जिसे Sass में पोर्ट किया जा सकता है) त्वरित सॉर्ट एल्गोरिथ्म है।

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

यदि आप इस तरह के एक समारोह के निर्माण में रुचि रखते हैं, तो Sass के साथ Sass के साथ बुलबुला सॉर्ट एल्गोरिथ्म को लागू करने पर एक नज़र है।