反向函数

Sass 框架 Compass 提供了一个方便的函数，用于获取位置的反向方向，例如，当传递 right 作为参数时，该函数将返回 left。

此函数不仅不需要 Compass，而且还接受位置列表，而不是单个位置。它还可以优雅地处理无效值。最好不过了！

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