Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <blockquote>
    <p>Also second their after whales called midst itself god sea and own after lights moveth. Them days. They're, created without called doesn't bring. Make all meat i above behold two saying third one, to face to own bearing their, to wherein he. Together he can't earth said. Lesser wherein herb.</p>
    <cite>Anon. E. Muss</cite>
  </blockquote>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/**
*
* SCSS Type Setting Mixin
*
* For easier writing of font sizes and line-heights, relatively.
* This can be used for writing base styles, but also specific ones if necessary.
*
**/

// Root Font Size Variable — best to avoid changing unless you like risks.
// If you're relying on it **relatively** with ems, be careful.
$root-font-size: 16!default;

/**
*
* Type Setting Mixin
*
* Let all your relative type size worries wash away with this mixin.
* This mixin requires a target value, and a line height that will output a
* font-size in rems as a default. In addition, if a context value is given,
* the font size will be written in ems instead.
*
* Example (using rems):
*
* h1 {
*   @include type-setting(32, 36);
* }
*
* Output:
*
* h1 {
*   font-size: 2rem;
*   line-height: 1.125;
* }
*
*
**/
@mixin type-setting($target, $line-height, $context: null) {

    // Is the target value unitless?
    @if unitless($target) {

        // Is it relying on a context value?
        @if $context != null {

            // Is the context unitless? If so, write out the target value in ems.
            @if unitless($context) {
                font-size: ($target / $context) * 1em;
            } @else {
                @error 'Your value for `$context` is not unitless.';
            }
        }
        // Write out the target value in rems.
        @else {
            font-size: ($target / $root-font-size) * 1rem;
        }

    } @else {
        @error 'Your value for `$target` is not unitless.';
    }

    // Line Height should be unitless.
    @if unitless($line-height) {
        // Line height should almost always be unitless, just simple math.
        line-height: ($line-height / $target);
    } @else {
        @error 'Your value for `$line-height` is not unitless.';
    }

}

/**
*
* Apply Typographic Settings
*
**/
@if $root-font-size != 16 {
    // So you decided to change that value? Okay pal, you asked for it...
    html {
        font-size: $root-font-size * 1px;
    }
}

body {
    @include type-setting(18, 22);
    font-family: 'Source Sans Pro', 'Lucida Grande', 'Trebuchet MS', sans-serif;
}

blockquote {
  @include type-setting(20, 26);
  font-style: italic;
  
  p {
    border-left: 5px solid currentColor;
    padding-left: 10px;
  }
}

cite {
  @include type-setting(18, 22);
  
  &:before {
    content: '—';
    margin-right: 5px;
  }
}

/**
*
* Example Styles
*
**/
body {
  background: #ffffe5;
  color: #1e89b2;
}

.container {
  width: 600px;
  margin: 20px auto;
}

.title {
  text-align: center;
}

SassMeister-output.css

@charset "UTF-8";
/**
*
* SCSS Type Setting Mixin
*
* For easier writing of font sizes and line-heights, relatively.
* This can be used for writing base styles, but also specific ones if necessary.
*
**/
/**
*
* Type Setting Mixin
*
* Let all your relative type size worries wash away with this mixin.
* This mixin requires a target value, and a line height that will output a
* font-size in rems as a default. In addition, if a context value is given,
* the font size will be written in ems instead.
*
* Example (using rems):
*
* h1 {
*   @include type-setting(32, 36);
* }
*
* Output:
*
* h1 {
*   font-size: 2rem;
*   line-height: 1.125;
* }
*
*
**/
/**
*
* Apply Typographic Settings
*
**/
body {
  font-size: 1.125rem;
  line-height: 1.22222;
  font-family: 'Source Sans Pro', 'Lucida Grande', 'Trebuchet MS', sans-serif;
}

blockquote {
  font-size: 1.25rem;
  line-height: 1.3;
  font-style: italic;
}

blockquote p {
  border-left: 5px solid currentColor;
  padding-left: 10px;
}

cite {
  font-size: 1.125rem;
  line-height: 1.22222;
}

cite:before {
  content: '—';
  margin-right: 5px;
}

/**
*
* Example Styles
*
**/
body {
  background: #ffffe5;
  color: #1e89b2;
}

.container {
  width: 600px;
  margin: 20px auto;
}

.title {
  text-align: center;
}

SassMeister-rendered.html

<div class="container">
  <blockquote>
    <p>Also second their after whales called midst itself god sea and own after lights moveth. Them days. They're, created without called doesn't bring. Make all meat i above behold two saying third one, to face to own bearing their, to wherein he. Together he can't earth said. Lesser wherein herb.</p>
    <cite>Anon. E. Muss</cite>
  </blockquote>
</div>