paolodina/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<!--
http://sassmeister.com/gist/680859146a5a951c19d5
-->
<main class="va-debug">
<p class="note">Rhythm OK on Firefox (v. 30 Linux), KO Chrome (v. 35 Linux).</p>
<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>

## SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// Vertical rhythm configurable variables
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// In this example we use ry5n vertical rhythm.
// Works perfectly in Firefox, but ugly in Chrome.

// Absolute height of body text, in pixels
$base-font-size: 14px;

// Absolute height of one line of type, in pixels
$base-line-height: 24px;

// The font unit to use when returning values in rhythm functions
$rhythm-font-unit: px !default;

// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
// to round the line height to the nearest half line height instead of the
// nearest integral line height to avoid large spacing between lines.
$round-to-nearest-half-line: false;

// Ensure there is at least this many pixels
// of vertical padding above and below the text.
$min-line-padding: 2px !default;


// Constants
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// Most (all?) browsers use a default of 16px for type.
$browser-default-font-size: 16px;

// The height of one line of type, in rems.
$rem-line-height: $base-line-height / $base-font-size * 1rem;


// Moving parts
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// Given pixel inputs, print rem values with pixel fallbacks.
// Based on Bitmanic's rem mixin (https://github.com/bitmanic/rem)
//
// $property  - The css property name
// $px-values - The value or values (space-separated list) for $property, in pixels
@mixin px-to-rem($property, $px-values) {
  // Number of pixels in 1rem (default: 16px/rem)
  // When converting to rems, we must divide by this ratio.
  $px-per-rem: $base-font-size / 1rem;

  // Print the pixel fallback declaration first so we can override it in capable browsers.
  #{$property}: $px-values;

  // If there is only one value, print the declaration with the value converted to rems.
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $px-per-rem;
  }
  @else {
    // Otherwise, we've got a list and we'll need to convert each value in turn.
    // Create an empty list that we can dump values into.
    $rem-values: ();
    @each $value in $px-values {
      // If the value is zero, a string or a color, leave it be.
      @if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
        $rem-values: append($rem-values, $value);
      } @else {
        $rem-values: append($rem-values, $value / $px-per-rem);
      }
    }
    // Print the property and its list of converted values.
    #{$property}: $rem-values;
  }
}

// Return the height of n baselines.
// Returns px or rem based on the value of $rhythm-font-unit.
@function rhythm($lines: 1) {
	$line-height: if($rhythm-font-unit != px, $rem-line-height, $base-line-height);
	@return $line-height * $lines;
}

// Calculate the number of baselines required to accomodate a
// given pixel-based font size.
@function lines-for-font-size($font-size) {
	$lines: if(
		$round-to-nearest-half-line,
		ceil(2 * $font-size / $base-line-height) / 2,
		ceil($font-size / $base-line-height)
	);
	@if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
		$lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
	}
	@return $lines;
}

// Set type size and baseline grid on the root element.
@mixin establish-baseline {
	html {
		$new-font-size: $base-font-size / $browser-default-font-size * 100%;	// eg. 16px ÷ 16px * 100%
		// Only set the font size if it differs from the browser default
		@if $new-font-size != 100% {
			font-size: $new-font-size;
		}
		@include set-leading(1);
	}
}

// Set the font size to the specified number of pixels while
// maintaining the vertical rhythm.
//
// $to-size - Desired font size, in pixels
// $lines   - Desired leading, expressed in baselines (can fractional)
@mixin set-font-size($to-size, $lines: lines-for-font-size($to-size)) {
	@include px-to-rem(font-size, $to-size);
	@include set-leading($lines);
}

// Adjust the leading to a new multiple of the baseline
@mixin set-leading($lines) {
	@include px-to-rem(line-height, $base-line-height * $lines);
}

// Apply leading whitespace
@mixin leader($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-top, rhythm($lines));
}

// Apply trailing whitespace
@mixin trailer($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-bottom, rhythm($lines));
}

// Apply leading whitespace as padding
@mixin padding-leader($lines: 1) {
	@include leader($lines, padding);
}

// Apply trailing whitespace as padding
@mixin padding-trailer($lines: 1) {
	@include trailer($lines, padding);
}

// Apply leading and trailing whitespace together.
// Defaults to equal margins above and below and no padding.
@mixin rhythm-spacing($leader: 1, $trailer: $leader, $padding-leader: 0, $padding-trailer: $padding-leader) {
	@include leader($leader);
	@include trailer($trailer);
	@include padding-leader($padding-leader);
	@include padding-trailer($padding-trailer);
}

// Apply a border to one side of an element without throwing off
// the vertical rhythm. The available space ($lines) must be
// greater than the width of your border.
@mixin side-rhythm-border($side, $lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border-#{$side}, $width $style $color);

	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding-#{$side}, $padding);
}

// Apply a leading rhythm border
@mixin leading-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(top, $lines, $border);
}

// Apply a trailing rhythm border
@mixin trailing-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(bottom, $lines, $border);
}

// Apply borders equally to all sides with padding to maintain the vertical rhythm
@mixin rhythm-borders($lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border, $width $style $color);

	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding, $padding);
}
@include establish-baseline;

// DEBUG - https://github.com/ianrose/typesettings/blob/gh-14-debug-vertical-alignment/_typesettings.scss#L153
// Creates base type baseline overlay and vertical unit overlay.
// To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag
@mixin debug-vertical-alignment($opacity: 0.8, $vertical-unit:  rhythm(), $type-baseline: $base-line-height) {
  position: relative;
  &:before, &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: none;
  }

  &:before {
    z-index: 10;
    background-image: -webkit-linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    //background-size: 100% ($base-line-height * 1em);
  }

  &:after {
    z-index: 9;
    background-image: -webkit-linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% $vertical-unit;
  }

  &.va-debug:before, &.va-debug:after {
    display: block;
    pointer-events: none;
  }
}

// basic vertical rhythm test
main {
  @include debug-vertical-alignment();
}

h1 {
  @include set-font-size(24px);
  @include rhythm-spacing();
  text-transform: uppercase;
}

p {
  @include rhythm-spacing();
}

.note {
  background: yellow;
  @include trailer(1);
}

## SassMeister-output.css
html {
  font-size: 87.5%;
  line-height: 24px;
  line-height: 1.71429rem;
}

main {
  position: relative;
}
main:before, main:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  display: none;
}
main:before {
  z-index: 10;
  background-image: -webkit-linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px);
  background-image: linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px);
}
main:after {
  z-index: 9;
  background-image: -webkit-linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px);
  background-image: linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px);
  background-size: 100% 24px;
}
main.va-debug:before, main.va-debug:after {
  display: block;
  pointer-events: none;
}

h1 {
  font-size: 24px;
  font-size: 1.71429rem;
  line-height: 48px;
  line-height: 3.42857rem;
  margin-top: 24px;
  margin-top: 1.71429rem;
  margin-bottom: 24px;
  margin-bottom: 1.71429rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  text-transform: uppercase;
}

p {
  margin-top: 24px;
  margin-top: 1.71429rem;
  margin-bottom: 24px;
  margin-bottom: 1.71429rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
}

.note {
  background: yellow;
  margin-bottom: 24px;
  margin-bottom: 1.71429rem;
}

## SassMeister-rendered.html
<!--
http://sassmeister.com/gist/680859146a5a951c19d5
-->
<main class="va-debug">
<p class="note">Rhythm OK on Firefox (v. 30 Linux), KO Chrome (v. 35 Linux).</p>
<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h1>foobar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>
	<!--
	http://sassmeister.com/gist/680859146a5a951c19d5
	-->
	<main class="va-debug">
	<p class="note">Rhythm OK on Firefox (v. 30 Linux), KO Chrome (v. 35 Linux).</p>
	<h1>foobar</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

	<h1>foobar</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

	<h1>foobar</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</main>
	// ----
	// Sass (v3.3.8)
	// Compass (v1.0.0.alpha.19)
	// ----

	// Vertical rhythm configurable variables
	// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

	// In this example we use ry5n vertical rhythm.
	// Works perfectly in Firefox, but ugly in Chrome.

	// Absolute height of body text, in pixels
	$base-font-size: 14px;

	// Absolute height of one line of type, in pixels
	$base-line-height: 24px;

	// The font unit to use when returning values in rhythm functions
	$rhythm-font-unit: px !default;

	// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
	// to round the line height to the nearest half line height instead of the
	// nearest integral line height to avoid large spacing between lines.
	$round-to-nearest-half-line: false;

	// Ensure there is at least this many pixels
	// of vertical padding above and below the text.
	$min-line-padding: 2px !default;


	// Constants
	// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

	// Most (all?) browsers use a default of 16px for type.
	$browser-default-font-size: 16px;

	// The height of one line of type, in rems.
	$rem-line-height: $base-line-height / $base-font-size * 1rem;


	// Moving parts
	// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

	// Given pixel inputs, print rem values with pixel fallbacks.
	// Based on Bitmanic's rem mixin (https://github.com/bitmanic/rem)
	//
	// $property - The css property name
	// $px-values - The value or values (space-separated list) for $property, in pixels
	@mixin px-to-rem($property, $px-values) {
	// Number of pixels in 1rem (default: 16px/rem)
	// When converting to rems, we must divide by this ratio.
	$px-per-rem: $base-font-size / 1rem;

	// Print the pixel fallback declaration first so we can override it in capable browsers.
	#{$property}: $px-values;

	// If there is only one value, print the declaration with the value converted to rems.
	@if type-of($px-values) == "number" {
	#{$property}: $px-values / $px-per-rem;
	}
	@else {
	// Otherwise, we've got a list and we'll need to convert each value in turn.
	// Create an empty list that we can dump values into.
	$rem-values: ();
	@each $value in $px-values {
	// If the value is zero, a string or a color, leave it be.
	@if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
	$rem-values: append($rem-values, $value);
	} @else {
	$rem-values: append($rem-values, $value / $px-per-rem);
	}
	}
	// Print the property and its list of converted values.
	#{$property}: $rem-values;
	}
	}

	// Return the height of n baselines.
	// Returns px or rem based on the value of $rhythm-font-unit.
	@function rhythm($lines: 1) {
	$line-height: if($rhythm-font-unit != px, $rem-line-height, $base-line-height);
	@return $line-height * $lines;
	}

	// Calculate the number of baselines required to accomodate a
	// given pixel-based font size.
	@function lines-for-font-size($font-size) {
	$lines: if(
	$round-to-nearest-half-line,
	ceil(2 * $font-size / $base-line-height) / 2,
	ceil($font-size / $base-line-height)
	);
	@if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
	$lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
	}
	@return $lines;
	}

	// Set type size and baseline grid on the root element.
	@mixin establish-baseline {
	html {
	$new-font-size: $base-font-size / $browser-default-font-size * 100%; // eg. 16px ÷ 16px * 100%
	// Only set the font size if it differs from the browser default
	@if $new-font-size != 100% {
	font-size: $new-font-size;
	}
	@include set-leading(1);
	}
	}

	// Set the font size to the specified number of pixels while
	// maintaining the vertical rhythm.
	//
	// $to-size - Desired font size, in pixels
	// $lines - Desired leading, expressed in baselines (can fractional)
	@mixin set-font-size($to-size, $lines: lines-for-font-size($to-size)) {
	@include px-to-rem(font-size, $to-size);
	@include set-leading($lines);
	}

	// Adjust the leading to a new multiple of the baseline
	@mixin set-leading($lines) {
	@include px-to-rem(line-height, $base-line-height * $lines);
	}

	// Apply leading whitespace
	@mixin leader($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-top, rhythm($lines));
	}

	// Apply trailing whitespace
	@mixin trailer($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-bottom, rhythm($lines));
	}

	// Apply leading whitespace as padding
	@mixin padding-leader($lines: 1) {
	@include leader($lines, padding);
	}

	// Apply trailing whitespace as padding
	@mixin padding-trailer($lines: 1) {
	@include trailer($lines, padding);
	}

	// Apply leading and trailing whitespace together.
	// Defaults to equal margins above and below and no padding.
	@mixin rhythm-spacing($leader: 1, $trailer: $leader, $padding-leader: 0, $padding-trailer: $padding-leader) {
	@include leader($leader);
	@include trailer($trailer);
	@include padding-leader($padding-leader);
	@include padding-trailer($padding-trailer);
	}

	// Apply a border to one side of an element without throwing off
	// the vertical rhythm. The available space ($lines) must be
	// greater than the width of your border.
	@mixin side-rhythm-border($side, $lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border-#{$side}, $width $style $color);

	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding-#{$side}, $padding);
	}

	// Apply a leading rhythm border
	@mixin leading-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(top, $lines, $border);
	}

	// Apply a trailing rhythm border
	@mixin trailing-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(bottom, $lines, $border);
	}

	// Apply borders equally to all sides with padding to maintain the vertical rhythm
	@mixin rhythm-borders($lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border, $width $style $color);

	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding, $padding);
	}
	@include establish-baseline;

	// DEBUG - https://github.com/ianrose/typesettings/blob/gh-14-debug-vertical-alignment/_typesettings.scss#L153
	// Creates base type baseline overlay and vertical unit overlay.
	// To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag
	@mixin debug-vertical-alignment($opacity: 0.8, $vertical-unit: rhythm(), $type-baseline: $base-line-height) {
	position: relative;
	&:before, &:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	display: none;
	}

	&:before {
	z-index: 10;
	background-image: -webkit-linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
	background-image: linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
	//background-size: 100% ($base-line-height * 1em);
	}

	&:after {
	z-index: 9;
	background-image: -webkit-linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
	background-image: linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
	background-size: 100% $vertical-unit;
	}

	&.va-debug:before, &.va-debug:after {
	display: block;
	pointer-events: none;
	}
	}

	// basic vertical rhythm test
	main {
	@include debug-vertical-alignment();
	}

	h1 {
	@include set-font-size(24px);
	@include rhythm-spacing();
	text-transform: uppercase;
	}

	p {
	@include rhythm-spacing();
	}

	.note {
	background: yellow;
	@include trailer(1);
	}
	html {
	font-size: 87.5%;
	line-height: 24px;
	line-height: 1.71429rem;
	}

	main {
	position: relative;
	}
	main:before, main:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	display: none;
	}
	main:before {
	z-index: 10;
	background-image: -webkit-linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px);
	background-image: linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px);
	}
	main:after {
	z-index: 9;
	background-image: -webkit-linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px);
	background-image: linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px);
	background-size: 100% 24px;
	}
	main.va-debug:before, main.va-debug:after {
	display: block;
	pointer-events: none;
	}

	h1 {
	font-size: 24px;
	font-size: 1.71429rem;
	line-height: 48px;
	line-height: 3.42857rem;
	margin-top: 24px;
	margin-top: 1.71429rem;
	margin-bottom: 24px;
	margin-bottom: 1.71429rem;
	padding-top: 0px;
	padding-top: 0rem;
	padding-bottom: 0px;
	padding-bottom: 0rem;
	text-transform: uppercase;
	}

	p {
	margin-top: 24px;
	margin-top: 1.71429rem;
	margin-bottom: 24px;
	margin-bottom: 1.71429rem;
	padding-top: 0px;
	padding-top: 0rem;
	padding-bottom: 0px;
	padding-bottom: 0rem;
	}

	.note {
	background: yellow;
	margin-bottom: 24px;
	margin-bottom: 1.71429rem;
	}