title: Effective CSS layout switching for Right-to-Left languages
body: <p>At the moment, my usual approach to supporting right-to-left (RTL) languages in a template is to simply add a <code>.rtl</code> class to the <code>body</code> tag, then go through all my existing left-to-right CSS and add left/right overrides as appropriate.</p>
  
  <p>For example, my site menu might be positioned like so by default as below:</p>
  
  <pre><code>.site-nav {
    position: absolute;
    left: 0;
    top: 0;
  }
  </code></pre>
  
  <p>...and then manually overridden for RTL languages this way (using some template logic at a CMS level to add the <code>.rtl</code> class to <code>body</code>):</p>
  
  <pre><code>.rtl .site-nav {
    left: auto;
    right: 0;
  }
  </code></pre>
  
  <p>My issue is that this seems labour-intensive and not very effecient. I was wondering what solutions others might have come up with to make this simpler.</p>
  
  <p><em>As an aside, I'm using a Compass environment to generate my CSS. But I don't know how to escape back from the current nesting to write a <code>.rtl</code> modifier adjacent to the current element's default styles. This in theory would be extremely useful, however, but I simply don't know if it's possible to perform a lookup all the way back to the <code>body</code> element or not whilst within a deeply-nested Sass rule.</em></p>