Funkce v opačném směru - Triky CSS

Anonim

Sass framework Compass poskytuje užitečnou funkci pro získání opačného směru polohy, například leftpři předávání rightjako argument.

Tato funkce nejenže nepotřebuje Compass, ale také přijímá seznam pozic místo jedné. Také elegantně zpracovává neplatnou hodnotu. Nic než to nejlepší!

/// Returns the opposite direction of each direction in a list /// @author Hugo Giraudel /// @param (List) $directions - List of initial directions /// @return (List) - List of opposite directions @function opposite-direction($directions) ( $opposite-directions: (); $direction-map: ( 'top': 'bottom', 'right': 'left', 'bottom': 'top', 'left': 'right', 'center': 'center', 'ltr': 'rtl', 'rtl': 'ltr' ); @each $direction in $directions ( $direction: to-lower-case($direction); @if map-has-key($direction-map, $direction) ( $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction))); ) @else ( @warn "No opposite direction can be found for `#($direction)`. Direction omitted."; ) ) @return $opposite-directions; )

Používání:

.selector ( background-position: opposite-direction(top right); )

Výsledek:

.selector ( background-position: bottom left; )