ricardozea
5/1/2015 - 7:47 PM

07_01 Pixels to Rems Sass mixin

07_01 Pixels to Rems Sass mixin


/*
<h3>: 24.57px		1.517em
<h2>: 25.888px		1.618em
<h1>: 39.269px		2.454em
http://www.modularscale.com/?16,1140&px&1.618&web&table
*/
//Mobile-first Media Query Mixin
@mixin mobile-first($media) {
  @media (min-width: $media) { @content; }
}
//Pixels to Rems Mixin
@mixin font-size($sizeValue: 1.6) {
   font-size: ($sizeValue * 10) + px;
   font-size: $sizeValue + rem;
}
//Base 10 model
html { font-size: 62.5%;
   @include mobile-first(40em) /*640px*/ {
      font-size: 75%;
   }
}
h1 { @include font-size(3.9269); }
h2 { @include font-size(2.5888); }
h3 { @include font-size(2.457); }
p { @include font-size(1.6); }

//Styles not needed for demo
body { margin: 0 30px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.4; }
h1, h2, h3 { margin-bottom: 0; }
p { margin-top: 10px; color: #666; }
<h1>Pixels to Rems Sass mixin</h1>
<hr>
<h1>Meaningful Typography for RWD</h1>
<p><em>“With a solid typographic scale you might even get away with not using a single image on your website.”</em></p>
<h2>Creating a Modular Scale for a Harmonious Typography</h2>
<p>A Modular Scale is a combination of a ratio of two numbers, and a base number.</p>
<h3>The Golden Ratio</h3>
<p>The most well-known ratio is the Golden Ratio also known as the Golden Section, Divine Proportion, etc. It’s value is 1.618.</p>