Ters Yön Fonksiyonu - CSS Hileleri

Anonim

Sass çerçevesi Compass, örneğin argüman olarak leftgeçerken bir konumun ters yönünü elde etmek için kullanışlı bir işlev sağlar right.

Bu işlev yalnızca Pusulaya ihtiyaç duymaz, aynı zamanda tek bir konum yerine bir konum listesini de kabul eder. Ayrıca, geçersiz değeri incelikle işler. En iyisinden başka bir şey yok!

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

Kullanım:

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

Sonuç:

.selector ( background-position: bottom left; )