{"id":191219,"date":"2014-12-19T02:31:50","date_gmt":"2014-12-19T09:31:50","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=191219"},"modified":"2021-08-04T08:39:53","modified_gmt":"2021-08-04T15:39:53","slug":"opposite-direction-function","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/opposite-direction-function\/","title":{"rendered":"Opposite-direction Function"},"content":{"rendered":"\n<p>Sass framework <a href=\"http:\/\/compass-style.org\" target=\"_blank\" rel=\"noopener\">Compass<\/a> provides a handy function to get the opposite direction of a position, for instance <code>left<\/code> when passing <code>right<\/code> as argument.<\/p>\n\n\n\n<p>This function not only does not need Compass, but it also accepts a list of positions rather than a single one. It also handles invalid value gracefully. Nothing but the best!<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">\/\/\/ Returns the opposite direction of each direction in a list\n\/\/\/ @author Kitty Giraudel\n\/\/\/ @param {List} $directions - List of initial directions\n\/\/\/ @return {List} - List of opposite directions\n@function opposite-direction($directions) {\n  $opposite-directions: ();\n  $direction-map: (\n    'top':    'bottom',\n    'right':  'left',\n    'bottom': 'top',\n    'left':   'right',\n    'center': 'center',\n    'ltr':    'rtl',\n    'rtl':    'ltr'\n  );\n \n  @each $direction in $directions {\n    $direction: to-lower-case($direction);\n    \n    @if map-has-key($direction-map, $direction) { \n      $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));\n    } @else {\n      @warn \"No opposite direction can be found for `#{$direction}`. Direction omitted.\";\n    }\n  }\n \n  @return $opposite-directions;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usage\">Usage<\/h3>\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.selector {\n  background-position: opposite-direction(top right);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"result\">Result<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.selector {\n  background-position: bottom left;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sass framework Compass provides a handy function to get the opposite direction of a position, for instance left when passing right as argument. This function not only does not need Compass, but it also accepts a list of positions rather than a single one. It also handles invalid value gracefully. Nothing but the best! Usage [&hellip;]<\/p>\n","protected":false},"author":40123,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":192882,"url":"https:\/\/css-tricks.com\/snippets\/sass\/css-triangle-mixin\/","url_meta":{"origin":191219,"position":0},"title":"CSS Triangle Mixin","date":"January 11, 2015","format":false,"excerpt":"There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it. If, like me, you never quite remember how it works, be sure we can use Sass to help us. \/\/\/\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/fix-number-n-digits\/","url_meta":{"origin":191219,"position":1},"title":"Fix a Number to N Digits","date":"January 9, 2015","format":false,"excerpt":"When dealing with numbers in JavaScript or any other programming language, there is a way to truncate a number after n digits. Unfortunately, there is no such function in Sass. Still, rounding and precision issues do happen when dealing with percentage based grid systems for instance. Here is a Sass\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192729,"url":"https:\/\/css-tricks.com\/snippets\/sass\/tint-shade-functions\/","url_meta":{"origin":191219,"position":2},"title":"Tint and Shade Functions","date":"January 9, 2015","format":false,"excerpt":"Both lighten and darken functions manipulate the lightness of a color in the HSL space by adding or subtracting lightness to it. Basically, they are nothing but aliases for the $lightness parameter of the adjust-color function. The thing is, those functions often do not provide the expected result. On the\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6674,"url":"https:\/\/css-tricks.com\/video-screencasts\/88-intro-to-compass-sass\/","url_meta":{"origin":191219,"position":3},"title":"#88: Intro to Compass\/Sass","date":"June 23, 2010","format":false,"excerpt":"Ask a bunch of designers what they wish CSS could do that it can't now, and you'll get a big list that reads much like the list of features for the Compass\/Sass framework. If you are like me, you don't have any trouble writing CSS, but the thought of being\u2026","rel":"","context":"In \"compass\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18140,"url":"https:\/\/css-tricks.com\/lodge\/v10\/018-making-our-project-use-compass\/","url_meta":{"origin":191219,"position":4},"title":"#018: Making our Project use Compass","date":"September 9, 2012","format":false,"excerpt":"We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192714,"url":"https:\/\/css-tricks.com\/snippets\/sass\/luminance-color-function\/","url_meta":{"origin":191219,"position":5},"title":"Color Luminance Function","date":"January 9, 2015","format":false,"excerpt":"When digging deep into color theory, there is something called relative color luminance. To put it simply, the luminance of a color defines whether its brightness. A luminance of 1 means the color is white. On the opposite, a luminance score of 0 means the color is black. Knowing the\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191219"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/40123"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=191219"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191219\/revisions"}],"predecessor-version":[{"id":346084,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191219\/revisions\/346084"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=191219"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=191219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}