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;


//
// $val: the pixel value (with or without the px unit)
// $adjust: the amount to adjust $val to achieve an equal rem value
@function emcalc($val, $adjust: $base_font_size, $unit: em) {
    $multiplier: 1 / $adjust;
    @return $val * $multiplier + $unit;
}

//
// $val: the pixel value (with or without the px unit)
// $prop: the css property to write
// $adjust: the amount to adjust $val to achieve an equal rem value
@mixin rem($val, $prop: 'font-size', $adjust: $base_font_size) {
    // strip unit from px if provided in the argument
    @if unit($val) == px {
        $val: $val / 1px;
    }
    #{$prop}: $val + px;
    #{$prop}: emcalc($val, $adjust, $unit: rem);
}

// Styles
html { font-size: 100%; }

body { 
    background-color: #eee; 
    color: #333; 
    @include rem($base_font_size);
    font-family: Helvetica, Arial, sans-serif; 
    line-height: 1.5; 
    padding: emcalc(30);
    }
// 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 emcalc(30); 
    max-width: emcalc(700); 
    padding-bottom: emcalc(20);
    h1 { 
        background-color: #666; 
        color: #eee; 
        @include rem(22);
        margin: 0 0 emcalc(30, 22);
        padding: emcalc(20, 22) emcalc(10, 22);
        text-transform: uppercase; 
        }
    
    p { 
        margin-bottom: emcalc(15);
        padding: 0 emcalc(10);
        }
    
    ul { 
        @include rem(13px);
        margin: 0; 
        padding: emcalc(20, 13) emcalc(30, 13);
        li { 
            padding-bottom: emcalc(5, 13); 
            }
        ul { 
            padding: emcalc(10, 13) emcalc(15, 13) emcalc(5, 13); 
            } 
    }
}

SassMeister-output.css

html {
  font-size: 100%;
}

body {
  background-color: #eee;
  color: #333;
  font-size: 16px;
  font-size: 1rem;
  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: 1.375rem;
  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: 0.8125rem;
  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>