Pretējā virziena funkcija - CSS-triki

Anonim

Sass ietvara kompass nodrošina ērtu funkciju, lai iegūtu pretēju pozīcijas virzienu, piemēram left, dodot rightargumentu.

Šai funkcijai nav nepieciešams tikai Compass, bet tā pieņem arī pozīciju sarakstu, nevis vienu. Tas arī graciozi apstrādā nederīgo vērtību. Nekas, bet labākais!

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

Lietošana:

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

Rezultāts:

.selector ( background-position: bottom left; )