Sass framework Compass biedt een handige functie om de tegenovergestelde richting van een positie te krijgen, bijvoorbeeld leftbij het doorgeven rightals argument.
Deze functie heeft niet alleen geen kompas nodig, maar accepteert ook een lijst met posities in plaats van een enkele. Het behandelt ook ongeldige waarde netjes. Niets behalve het beste!
/// 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; )Gebruik:
.selector ( background-position: opposite-direction(top right); )Resultaat:
.selector ( background-position: bottom left; )