Generated by SassMeister.com.

SassMeister-input-HTML.jade

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        title Mastering Sass: Chapter 2

        link(href="css/style.css" rel="stylesheet")
    
    body
        div
            - var i = 1
            each heading in ["h1", "h2", "h3", "h4", "h5", "h6"]
                #{heading} Heading #{i}
                - i++
            p
                | This is a paragraph with 
                em emphasised 
                | text, 
                strong strong 
                | text and a 
                a(href="#") link.
            p 
                img(src="http://placehold.it/600x300" alt="Image from Placehold.it")
                | Um yesbaby terry thomas admiral socially mobile brush mexican bad guy, groucho marx admiral um yesbaby rock n roll star sportacus mexican brush bad guy furry facial friend terry thomas socially mobile man markings, bad guy pit fighter sportacus terry thomas um yesbaby mexican cigars groucho marx man markings admiral challenge you to a duel robert winston rock n roll star brush socially mobile furry facial friend. Furry facial friend village people lady magnets I drink your milkshake louis xiii, sweat irrigator, glorious facial hair mustachioed east european louis xiii Freddie mercury hairy kiss. I drink your milkshake lady magnets furry facial friend village people basil fawlty, I drink your milkshake lady magnets louis xiii east european et village people sweat irrigator, mustachioed Freddie mercury hairy kiss. brandy basil fawlty jimi hendrix furry facial friend glorious facial hair.
            p
                img(src="http://placehold.it/300x200" alt="Image from Placehold.it" style="float:left;")
                | Mexican’t great dictator burt reynolds graeme souness, sportacus boogie nights got milk graeme souness caterpillar professor plum sam elliott mexican’t great dictator burt reynolds id furry facial friend, mexican’t got milk burt reynolds sam elliott id boogie nights sportacus waiter top gun caterpillar great dictator elit furry facial friend graeme souness professor plum? Waiter david seaman musketeer mr frothy-top knavish rogue, waiter doctor strange david seaman et sodales cum terry thomas iron tache waiter musketeer mr frothy-top knavish rogue tony stark, knavish rogue musketeer mark lawrenson iron tache terry thomas stiff upper lip waiter doctor strange waiter et sodales cum give him what-for handsome tony stark david seaman face mop mr frothy-top bruce forsyth circus strongman?

            ul
                - var n = 1
                while n <= 4
                    li List Item #{n++}

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// mastering-sass/ch02/scss/style.scss
$base-font-family-sans: sans-serif
$base-font-family-serif: serif
$base-font-family-code: monospace

$base-font-size: 1rem
$base-line-height: 1.5

$base-font-family: $base-font-family-sans
$base-headings-font-family: $base-font-family-serif

// ==========================================================================================
// mastering-sass/ch02/scss/helpers/_mixins.scss
// ==========================================================================================

// @import helpers/functions

// ==============================
// FUNCTIONS
// ==============================
// mastering-sass/ch02/scss/helpers/_functions.scss
@function base-font-size-calc($current-font-family: $base-font-family)
  @return if($current-font-family == $base-font-family-serif, $base-font-size * 1.15, $base-font-size)

// mastering-sass/ch02/scss/helpers/_functions.scss
@function base-heading-sizes-calc($heading: 2, $font-family: $base-headings-font-family)
  $h4-font-size: base-font-size-calc($font-family)
  $h1-font-size: $h4-font-size * 2
  $h2-font-size: $h1-font-size / 1.3333
  $h3-font-size: $h2-font-size / 1.2821
  $h5-font-size: $h4-font-size / 1.2048
  $h6-font-size: $h5-font-size / 1.2388
  $headings: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size
  @return nth($headings, $heading)

// mastering-sass/ch02/scss/helpers/_functions.scss
@function base-heading-line-height($heading: 2, $font-family: $base-headings-font-family)
  $h1-line-height: base-heading-sizes-calc(2, $font-family)
  $h2-line-height: base-heading-sizes-calc(3, $font-family)
  $h3-line-height: base-heading-sizes-calc(4, $font-family)
  $h4-line-height: base-heading-sizes-calc(5, $font-family)
  $h5-line-height: base-heading-sizes-calc(6, $font-family)
  $h6-line-height: base-heading-sizes-calc(6, $font-family) / $h1-line-height
  $line-heights: $h1-line-height, $h2-line-height, $h3-line-height, $h4-line-height, $h5-line-height, $h6-line-height
  @return nth($line-heights, $heading)

// ==========================================================================================
// mastering-sass/ch02/scss/helpers/_mixins.scss
// ==========================================================================================

// @import helpers/mixins

// ==============================
// MIXINS
// ==============================
// mastering-sass/ch02/scss/helpers/_mixins.scss
=base-font-family-sizing($current-font-family: $base-font-family)
  font-size: base-font-sizes-calc()
  font-family: $current-font-family
  line-height: $base-line-height
  margin-bottom: $base-font-size * $base-line-height

// mastering-sass/scss/helpers/_mixins.scss
=base-headings-font-family-sizing($heading: 2, $current-font-family: $base-headings-font-family)
  font-family: $current-font-family
  font-size: base-heading-sizes-calc($heading, $current-font-family)
  line-height: base-heading-line-height($heading, $current-font-family)

// mastering-sass/scss/helpers/_mixins.scss
=base-headings($headings: ())
  @for $i from 1 to 6
    h#{$i}
      +base-headings-font-family-sizing($i, $base-headings-font-family)

// ==========================================================================================
// mastering-sass/ch02/scss/style.scss
// ==========================================================================================
// ==============================
// STYLE
// ==============================
*, *::before, *::after
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

html
  font-family: serif
  font-size: 100%
  -webkit-font-smoothing: antialiased

html, body
  padding: 0
  margin: 0

body > div
  max-width: 38rem
  margin: 0 auto

p
  +base-font-family-sizing

+base-headings()

SassMeister-output.css

*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

html, body {
  padding: 0;
  margin: 0;
}

body > div {
  max-width: 38rem;
  margin: 0 auto;
}

p {
  font-size: base-font-sizes-calc();
  font-family: sans-serif;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

h1 {
  font-family: serif;
  font-size: 2.3rem;
  line-height: 1.72504rem;
}

h2 {
  font-family: serif;
  font-size: 1.72504rem;
  line-height: 1.34548rem;
}

h3 {
  font-family: serif;
  font-size: 1.34548rem;
  line-height: 1.15rem;
}

h4 {
  font-family: serif;
  font-size: 1.15rem;
  line-height: 0.95452rem;
}

h5 {
  font-family: serif;
  font-size: 0.95452rem;
  line-height: 0.77052rem;
}

SassMeister-rendered.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Mastering Sass: Chapter 2</title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <p>This is a paragraph with <em>emphasised </em>text, <strong>strong </strong>text and a <a href="#">link.</a></p>
      <p><img src="http://placehold.it/600x300" alt="Image from Placehold.it">Um yesbaby terry thomas admiral socially mobile brush mexican bad guy, groucho marx admiral um yesbaby rock n roll star sportacus mexican brush bad guy furry facial friend terry thomas socially mobile man markings, bad guy pit fighter sportacus terry thomas um yesbaby mexican cigars groucho marx man markings admiral challenge you to a duel robert winston rock n roll star brush socially mobile furry facial friend. Furry facial friend village people lady magnets I drink your milkshake louis xiii, sweat irrigator, glorious facial hair mustachioed east european louis xiii Freddie mercury hairy kiss. I drink your milkshake lady magnets furry facial friend village people basil fawlty, I drink your milkshake lady magnets louis xiii east european et village people sweat irrigator, mustachioed Freddie mercury hairy kiss. brandy basil fawlty jimi hendrix furry facial friend glorious facial hair.</p>
      <p><img src="http://placehold.it/300x200" alt="Image from Placehold.it" style="float:left;">Mexican’t great dictator burt reynolds graeme souness, sportacus boogie nights got milk graeme souness caterpillar professor plum sam elliott mexican’t great dictator burt reynolds id furry facial friend, mexican’t got milk burt reynolds sam elliott id boogie nights sportacus waiter top gun caterpillar great dictator elit furry facial friend graeme souness professor plum? Waiter david seaman musketeer mr frothy-top knavish rogue, waiter doctor strange david seaman et sodales cum terry thomas iron tache waiter musketeer mr frothy-top knavish rogue tony stark, knavish rogue musketeer mark lawrenson iron tache terry thomas stiff upper lip waiter doctor strange waiter et sodales cum give him what-for handsome tony stark david seaman face mop mr frothy-top bruce forsyth circus strongman?</p>
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
      </ul>
    </div>
  </body>
</html>