Función de dirección opuesta | Programar Plus

Sass framework Compass proporciona una función útil para obtener la dirección opuesta de una posición, por ejemplo left al pasar right como argumento.

Esta función no solo no necesita Compass, sino que también acepta una lista de posiciones en lugar de una sola. También maneja con gracia los valores no válidos. ¡Solo lo mejor!

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

Uso

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

Resultado

.selector {
  background-position: bottom left;
}
(Visited 9 times, 1 visits today)