SCSS version of http://typecast.com/blog/a-more-modern-scale-for-web-typography

modern-scale.scss

// --------------------------------------------------------------------------------------
// A More Modern Scale for Web Typography
// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------

$body-font-size: 1em !default;

// Adjusts body typography to be default
// for each browser.
@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {
  body { font-size: $font-size; }
  body, h1, h2, h3, h4, h5, h6 { font-size-adjust: $size-adjustment; }
}

// Setting body content scale
@mixin body-content-scale($page-id, $line-height: 1.25) {
  ##{$page-id} {
    font-size: $body-font-size; // 16px
    line-height: $line-height;

    @media (min-width: 43.75em) {
      font-size: $body-font-size; // 16px
      line-height: $line-height * 1.1; // 1.375
    }
  }
}

// Setting h1 scale
@mixin h1-scale($line-height: 1.25) {
  h1 {
    font-size: $body-font-size * 2; // 2x body copy size = 32px
    line-height: $line-height;

    @media (min-width: 43.75em) {
      font-size: $body-font-size * 2.5; // 2.5x body copy size = 40px
      line-height: $line-height * .9; // 1.125
    }

    @media (min-width: 56.25em) {
      font-size: $body-font-size * 3; // 3x body copy size = 48px
      line-height: $line-height * .85; // 1.0625
    }
  }
}

// Setting h2 scale
@mixin h2-scale($font-size: 1.625em, $line-height: 1.25) {
  h2 {
    font-size: $font-size;
    line-height: $line-height * .92; // 1.15

    @media (min-width: 43.75em) {
      font-size: $body-font-size * 2; // 2 body copy size = 32px
      line-height: $$line-height;
    }

    @media (min-width: 56.25em) {
      font-size: $body-font-size * 2.25; // 2.25x body copy size = 48px
      line-height: $line-height;
    }
  }
}

// Setting h3 scale
@mixin h3-scale($line-height: 1.25) {
  h3 {
    font-size: $body-font-size * 1.375; // 1.375x body copy size = 22px
    line-height: $line-height * .909; // 1.13625

    @media (min-width: 43.75em) {
      font-size: $body-font-size * 1.5; // 1.5x body copy size = 24px
      line-height: $$line-height;
    }

    @media (min-width: 56.25em) {
      font-size: $body-font-size * 1.75; // 1.75x body copy size = 28px
      line-height: $line-height;
    }
  }
}

// Setting h4 scale
@mixin h4-scale($line-height: 1.11) {
  h4 {
    font-size: $body-font-size * 1.125; // 1.1255x body copy size = 18px
    line-height: $line-height;

    @media (min-width: 43.75em) {
      line-height: $$line-height * 1.1; // 1.221
    }
  }
}

// Setting blockquote scale
@mixin blockquote-scale($font-size: 1.25em, $line-height: 1.25) {
  blockquote {
    font-size: $font-size;
    line-height: $line-height * 1.2; // 1.5

    @media (min-width: 43.75em) {
      font-size: $font-size;
      line-height: $$line-height * 1.166; // 1.4575
    }
  }
}

I had error:
Line 17 of _modernscale.scss: Invalid CSS after " #{": expected expression (e.g. 1px, bold), was "#$page-id} {")

I need help. What is a scss file? What does @mixin refer to? How does this code relate to the article it is based on?