Funcții de programare funcțională - CSS-Tricks

Anonim

Pentru creatorii de biblioteci și constructorii de cadru, ar putea fi util să ai câteva funcții suplimentare pentru a aplica dinamic funcții elementelor dintr-o listă. Iată 4 funcții inspirate din JavaScript și echivalente PHP, implementate în Sass.

mers pe jos()

walk()Funcția se aplică o funcție dată pentru fiecare element al unei liste.

/// Apply `$function` with `$args` to each item from `$list`. /// @author Hugo Giraudel /// @param (List) $list - List of items /// @param (String) $function - Function to apply to every item from `$list` /// @param (Arglist) $args - Extra arguments to pass to `$function` /// @return (List) /// @throw There is no `#($function)` function. @function walk($list, $function, $args… ) ( @if not function-exists($function) ( @error "There is no `#($function)` function."; ) @for $i from 1 through length($list) ( $list: set-nth($list, $i, call($function, nth($list, $i), $args… )); ) @return $list; )

Utilizare

walk ( walk: walk(red green blue, invert); walk: walk(red green blue, lighten, 20%); walk: walk(2 4 6 8 10, sqrt); )
walk ( walk: cyan #ff7fff yellow; walk: #ff6666 #00e600 #6666ff; walk: 1.41421 2 2.44949 2.82843 3.16228; )

niste()

În some()funcție returnează dacă anumite elemente dintr - un test de listă trecere dată (în funcție).

/// Return whether some items from `$list` passed `$function` test. /// @author Hugo Giraudel /// @param (List) $list - List of items /// @param (String) $function - Function to run on every item from `$list` /// @param (Arglist) $args - Extra arguments to pass to `$function` /// @return (Boolean) /// @throw There is no `#($function)` function. @function some($list, $function, $args… ) ( @if not function-exists($function) ( @error "There is no `#($function)` function."; ) @each $item in $list ( @if call($function, $item, $args… ) ( @return true; ) ) @return false; )

Utilizare

some ( some: some(round ceil floor, function-exists); some: some(round ceil unknown, function-exists); some: some(completely unknown function, function-exists); some: some(4px 10px 20px, comparable, 42px); some: some(4px 10% 20px, comparable, 42%); some: some(4px 10px 20px, comparable, 42%); )
some ( some: true; some: true; some: false; some: true; some: true; some: false; )

fiecare()

În every()funcție returnează dacă fiecare elemente dintr - o listă de test (ca trecere dată o funcție).

/// Return whether all items from `$list` passed `$function` test. /// @author Hugo Giraudel /// @param (List) $list - List of items /// @param (String) $function - Function to run on every item from `$list` /// @param (Arglist) $args - Extra arguments to pass to `$function` /// @return (Boolean) /// @throw There is no `#($function)` function. @function every($list, $function, $args… ) ( @if not function-exists($function) ( @error "There is no `#($function)` function."; ) @each $item in $list ( @if not call($function, $item, $args… ) ( @return false; ) ) @return true; )

Utilizare

every ( every: every(round ceil floor, function-exists); every: every(round ceil unknown, function-exists); every: every(completely unknown function, function-exists); every: every(4px 10px 20px, comparable, 42px); every: every(4px 10% 20px, comparable, 42%); every: every(4px 10px 20px, comparable, 42%); )
every ( every: true; every: false; every: false; every: true; every: false; every: false; )

funcții-walk ()

functions-walk()Funcția returnează o listă făcută de rezultatul fiecărui apel de funcție.

/// Return a list made of the result of each function call from `$functions` with `$args`. /// @author Hugo Giraudel /// @param (List) $functions - List of functions to call /// @param (Arglist) $args - Extra arguments to pass to each function in `$functions` /// @return (List) /// @throw There is no `#($function)` function. @function functions-walk($functions, $args… ) ( $list: (); @each $function in $functions ( @if not function-exists($function) ( @error "There is no `#($function)` function."; ) $list: append($list, call($function, $args… )); ) @return $list; )

Utilizare

functions-walk ( functions-walk: functions-walk('red' 'blue' 'green', #BADA55); functions-walk: functions-walk('round' 'ceil' 'floor', 3.1415279); )
functions-walk ( functions-walk: 186 85 218; functions-walk: 3 4 3; )