Opposite-direction Function

Avatar of Kitty Giraudel
Kitty Giraudel on (Updated on )

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;


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


.selector {
  background-position: bottom left;