Fonction sens inverse - Astuces CSS

Anonim

Framework Sass Compass fournit une fonction pratique pour obtenir la direction opposée d'une position, par exemple leftlors de la transmission righten argument.

Cette fonction n'a pas seulement besoin de Compass, mais elle accepte également une liste de positions plutôt qu'une seule. Il gère également les valeurs non valides avec élégance. Rien que le meilleur!

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

Usage:

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

Résultat:

.selector ( background-position: bottom left; )