Sass framework Compass proporciona una función útil para obtener la dirección opuesta de una posición, por ejemplo, leftcuando se pasa rightcomo argumento.
Esta función no solo no necesita Compass, sino que también acepta una lista de posiciones en lugar de una sola. También maneja el valor inválido con gracia. ¡Solo lo mejor!
/// 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; )Uso:
.selector ( background-position: opposite-direction(top right); )Resultado:
.selector ( background-position: bottom left; )