Fungsi berlawanan arah - Trik CSS

Anonim

Framework Sass Compass menyediakan fungsi praktis untuk mendapatkan arah berlawanan dari suatu posisi, misalnya leftsaat memberikan rightargumen.

Fungsi ini tidak hanya tidak membutuhkan Kompas, tetapi juga menerima daftar posisi, bukan satu posisi. Ini juga menangani nilai yang tidak valid dengan baik. Hanya yang terbaik!

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

Pemakaian:

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

Hasil:

.selector ( background-position: bottom left; )