Sıralama Fonksiyonu - CSS Hileleri

Anonim

Sass, bir değerler listesini sıralamak için herhangi bir yerleşik yol sağlamaz. Dize işleme işlevleri sayesinde, belirli bir sırayı takip eden bir öğe listesini sıralamak için bir işlev oluşturabiliriz.

Sıralanacak değerler yalnızca sayılar ve sayılarsa, bu oldukça kolay olur çünkü Sass bunları yerel olarak karşılaştırabilir.

Numaraları sıralama

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

Sayıları ve dizeleri sıralama

Bununla birlikte, sayıların yanı sıra dizeleri de sıralamayı düşünüyorsanız, biraz karmaşıklık içerir, bu yüzden her seferinde bir adım yapalım.

İlk önce bir sıralama düzenine ihtiyacımız var.

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

Ardından, hangi değerin önce geldiğini belirlemek için yardımcı bir işleve ihtiyacımız var.

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

Son olarak, ancak en az değil, sıralama işlevimizi oluşturabiliriz. En verimli uygulama (Sass'a taşınabilen) hızlı sıralama algoritmasıdır.

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

Böyle bir işlevi yapmakla ilgileniyorsanız, The Sass Way'de Sass ile Bubble Sort algoritmasının uygulanmasına bir göz atın.