विपरीत-दिशा कार्य - सीएसएस-ट्रिक्स

Sass फ्रेमवर्क Compass किसी स्थिति के विपरीत दिशा प्राप्त करने के लिए एक आसान कार्य प्रदान करता है, उदाहरण के लिए leftजब rightतर्क के रूप में।

इस फ़ंक्शन को न केवल कम्पास की आवश्यकता है, बल्कि यह एक एकल के बजाय पदों की सूची को भी स्वीकार करता है। यह अमान्य मान को भी इनायत से संभालता है। और कुछ नहीं पर उत्तम!

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

उपयोग:

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

परिणाम:

.selector ( background-position: bottom left; )