Generated by SassMeister.com.

SassMeister-input-HTML.html

<article class="module">
    <h1>Welcome</h1>
    <p>This is a simple example using a combination of both REM and EM to help dictate margin, padding, etc in EM values, based on a font-size set in REM for the parent containers.</p>
    <p>Use Rems when a font size change is needed on an element, but then use EMs for padding, margins and any children elements.</p>
    <p>Just set the font size in Rems, and then for any other measurements use EMs by doing (desired px value/element font-size in pixels + em).</p>
</article>

<article class="module">
    <h1>Example</h1>
    <p>I'm sure that it would be possible to use Sass in a better (and cooler) way to start controlling the sizing even moreso and really harness Sass's power. I'll be looking into it, as I play further with this technique.</p>
    <p>Along with making sizing with EMs a bit easier, the use of Rems on the parent container helps to eliminate the compounding issue that is inherent to using EMs.</p>
    <p>See the example list below:</p>
    <ul>
        <li>List Item One</li>
        <li>
            List Item One
            <ul>
                <li>Sub List Item One</li>
                <li>Sub List Item Two</li>
                <li>Sub List Item Three</li>
            </ul>
        </li>
        <li>List Item One</li>
        <li>List Item One</li>
    </ul>
    <p>What I've found with using this on a couple projects so far, is that it allows you to use the best qualities of both Rems AND Ems!</p>
</article>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Variables
$base_font_size: 16;
$base_font_size_quotient: $base_font_size / 10;

// Styles
html { font-size: 62.5% }

body { background-color: #eee; color: #333; font-size: $base_font_size + px; font-size: $base_font_size_quotient + rem; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; padding: (30/$base_font_size + em); }
// To help with compatibility with browsers that don't support Rem, it's useful to specify both the font-size in pixels and in rems.
// See Snook's post on using Rems: http://snook.ca/archives/html_and_css/font-size-with-rem
// Added bonus, by not sepcifying font-size using the shorthand property, we allow for IE9 & 10 support for Rems!
// See the "Known Issues" tab in the link: http://caniuse.com/#search=rem

.module { background-color: #bbb; margin: 0 auto (30/$base_font_size + em); max-width: (700/$base_font_size + em); padding-bottom: (20/$base_font_size + em);
    h1 { background-color: #666; color: #eee; font-size: 22px; font-size: 2.2rem; margin: 0 0 (30/22 + em); padding: (20/22 + em) (10/22 + em); text-transform: uppercase; }
    
    p { margin-bottom: (15/$base_font_size + em); padding: 0 (10/$base_font_size + em); }
    
    ul { font-size: 13px; font-size: 1.3rem; margin: 0; padding: (20/13 + em) (30/13 + em); 
        li { padding-bottom: (5/13 + em); }
        ul { padding: (10/13 + em) (15/13 + em) (5/13 + em); } 
    }
}

SassMeister-output.css

html {
  font-size: 62.5%;
}

body {
  background-color: #eee;
  color: #333;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  padding: 1.875em;
}

.module {
  background-color: #bbb;
  margin: 0 auto 1.875em;
  max-width: 43.75em;
  padding-bottom: 1.25em;
}
.module h1 {
  background-color: #666;
  color: #eee;
  font-size: 22px;
  font-size: 2.2rem;
  margin: 0 0 1.36364em;
  padding: 0.90909em 0.45455em;
  text-transform: uppercase;
}
.module p {
  margin-bottom: 0.9375em;
  padding: 0 0.625em;
}
.module ul {
  font-size: 13px;
  font-size: 1.3rem;
  margin: 0;
  padding: 1.53846em 2.30769em;
}
.module ul li {
  padding-bottom: 0.38462em;
}
.module ul ul {
  padding: 0.76923em 1.15385em 0.38462em;
}

SassMeister-rendered.html

<article class="module">
    <h1>Welcome</h1>
    <p>This is a simple example using a combination of both REM and EM to help dictate margin, padding, etc in EM values, based on a font-size set in REM for the parent containers.</p>
    <p>Use Rems when a font size change is needed on an element, but then use EMs for padding, margins and any children elements.</p>
    <p>Just set the font size in Rems, and then for any other measurements use EMs by doing (desired px value/element font-size in pixels + em).</p>
</article>

<article class="module">
    <h1>Example</h1>
    <p>I'm sure that it would be possible to use Sass in a better (and cooler) way to start controlling the sizing even moreso and really harness Sass's power. I'll be looking into it, as I play further with this technique.</p>
    <p>Along with making sizing with EMs a bit easier, the use of Rems on the parent container helps to eliminate the compounding issue that is inherent to using EMs.</p>
    <p>See the example list below:</p>
    <ul>
        <li>List Item One</li>
        <li>
            List Item One
            <ul>
                <li>Sub List Item One</li>
                <li>Sub List Item Two</li>
                <li>Sub List Item Three</li>
            </ul>
        </li>
        <li>List Item One</li>
        <li>List Item One</li>
    </ul>
    <p>What I've found with using this on a couple projects so far, is that it allows you to use the best qualities of both Rems AND Ems!</p>
</article>