反向功能

Sass框架Compass提供了一个方便的功能来获取与位置相反的方向，例如，在right传递作为参数时left 。

该功能不仅不需要指南针，还可以接受一系列职位，而不是一个职位。 它还可以优雅地处理无效值。 最好不过了！

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

用法：

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

结果：

.selector {
  background-position: bottom left;
}

翻译自: https://css-tricks.com/snippets/sass/opposite-direction-function/