Hàm ngược hướng - Thủ thuật CSS

Anonim

Khung công tác Sass La bàn cung cấp một chức năng tiện dụng để lấy hướng ngược lại của một vị trí, chẳng hạn như leftkhi truyền rightdưới dạng đối số.

Chức năng này không những không cần La bàn mà còn chấp nhận một danh sách các vị trí thay vì một vị trí duy nhất. Nó cũng xử lý giá trị không hợp lệ một cách duyên dáng. Không gì ngoài tốt nhất!

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

Sử dụng:

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

Kết quả:

.selector ( background-position: bottom left; )