Sass framework Compass provides a handy function to get the opposite direction of a position, for instance left
when passing right
as argument.
This function not only does not need Compass, but it also accepts a list of positions rather than a single one. It also handles invalid value gracefully. Nothing but the best!
/// Returns the opposite direction of each direction in a list
/// @author Kitty 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;
}
Usage
.selector {
background-position: opposite-direction(top right);
}
Result
.selector {
background-position: bottom left;
}
comment