Testing mixins for font sizing (test1) Generated by SassMeister.com.
<div class="container">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h2>Heading 2 with multiline content wrapping multiple lines across the document</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</small>
</div>
body {
font-family: "Proxima Nova";
font-size: 18;
font-size: 1rem;
line-height: 1.5;
color: #546478;
background-image: url(http://basehold.it/i/27); }
.container {
max-width: 620px;
margin: 0 auto; }
h1, h2, h3, h4 {
color: #3f4b5a;
margin: 0; }
h1 {
font-size: 46;
font-size: 2.55556rem;
line-height: 1.17391; }
h2 {
font-size: 32;
font-size: 1.77778rem;
line-height: 1.6875; }
h3 {
font-size: 26;
font-size: 1.44444rem;
line-height: 1.03846; }
small {
font-size: 12;
font-size: 0.66667rem;
line-height: 2.25; }
// ----
// libsass (v0.7.0)
// ----
$base-font-size: 18;
$base-line-height: $base-font-size * 1.5;
// mixin
@mixin font-size($font-size, $line-height:true){
font-size:$font-size;
font-size:($font-size / $base-font-size)*1rem;
@if $line-height == true{
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
}
body{
font-family: "Proxima Nova";
@include font-size($base-font-size);
color: hsla(213, 18%, 40%, 1);
background-image: url(http://basehold.it/i/27); // 24px baseline
}
.container{
max-width: 620px;
margin: 0 auto;
}
h1, h2, h3, h4{
color: hsla(213, 18%, 30%, 1);
margin: 0;
}
h1{
@include font-size(46);
}
h2{
@include font-size(32);
}
h3{
@include font-size(26);
}
small{
@include font-size(12);
}
<div class="container">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h2>Heading 2 with multiline content wrapping multiple lines across the document</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</small>
</div>