Funktion für die entgegengesetzte Richtung

Das Sass-Framework Compass bietet eine praktische Funktion, um die entgegengesetzte Richtung einer Position zu erhalten, zum Beispiel left, wenn right als Argument übergeben wird.

Diese Funktion benötigt nicht nur kein Compass, sondern akzeptiert auch eine Liste von Positionen anstelle einer einzelnen. Sie behandelt auch ungültige Werte fehlerfrei. Nur das Beste!

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

Verwendung

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

Ergebnis

.selector {
  background-position: bottom left;
}