Funkcija v nasprotni smeri - CSS-triki

Anonim

Okvir Sass Compass ponuja priročno funkcijo za doseganje nasprotne smeri položaja, na primer leftpri podajanju rightkot argument.

Ta funkcija ne samo, da potrebuje Compass, ampak tudi sprejema seznam položajev in ne enega. Prav tako elegantno obravnava neveljavno vrednost. Nič drugega kot najboljše!

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

Uporaba:

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

Rezultat:

.selector ( background-position: bottom left; )