Funzione di direzione opposta - Trucchi CSS

Anonim

Il framework Sass Compass fornisce una comoda funzione per ottenere la direzione opposta di una posizione, ad esempio leftquando viene passata rightcome argomento.

Questa funzione non solo non necessita di Bussola, ma accetta anche un elenco di posizioni anziché una singola. Gestisce anche valori non validi con garbo. Nient'altro che il meglio!

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

Utilizzo:

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

Risultato:

.selector ( background-position: bottom left; )