Generated by SassMeister.com.

SassMeister-input-HTML.html

<header role="banner">
  <h1>This Headline
  <span>is optically centered</span></h1>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt velit massa, sit amet interdum dui tincidunt quis. Aenean at malesuada nibh. Nam sed lectus eros. Sed lacus magna, aliquam eu hendrerit in, rutrum vel quam. In congue iaculis velit et dignissim. Sed blandit laoreet justo vitae congue. Sed tellus velit, iaculis eget iaculis viverra, feugiat sit amet velit. In congue eros vel ipsum euismod dictum. Proin risus justo, facilisis vitae sodales vitae, volutpat at massa. Donec tincidunt purus in dapibus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nec libero hendrerit, cursus erat quis, facilisis sapien.
</p>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

@mixin optical-center($padding, $ratio: 1.3) {
	$padding-bottom: $padding * $ratio;
	$padding-top: $padding;

	// do some additional math

	padding-bottom: $padding-bottom;
	padding-top: $padding-top;
}

header[role="banner"] {
	@include optical-center(2em);
}

/**
 * Additional styles for formatting
 */
 
body {
 font-family: sans-serif;
}

header[role="banner"] {
  background-color: #f4d23e;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  
  h1 {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #53585f;
    font-size: 32px;
    
    span {
      display: block;
      font-size: 20px;
      font-family: serif;
      font-style: italic;
      text-transform: lowercase;
      font-weight: normal;
      letter-spacing: 0;
    }
  }
}

SassMeister-output.css

header[role="banner"] {
  padding-bottom: 2.6em;
  padding-top: 2em;
}

/**
 * Additional styles for formatting
 */
body {
  font-family: sans-serif;
}

header[role="banner"] {
  background-color: #f4d23e;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
header[role="banner"] h1 {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #53585f;
  font-size: 32px;
}
header[role="banner"] h1 span {
  display: block;
  font-size: 20px;
  font-family: serif;
  font-style: italic;
  text-transform: lowercase;
  font-weight: normal;
  letter-spacing: 0;
}

SassMeister-rendered.html

<header role="banner">
  <h1>This Headline
  <span>is optically centered</span></h1>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt velit massa, sit amet interdum dui tincidunt quis. Aenean at malesuada nibh. Nam sed lectus eros. Sed lacus magna, aliquam eu hendrerit in, rutrum vel quam. In congue iaculis velit et dignissim. Sed blandit laoreet justo vitae congue. Sed tellus velit, iaculis eget iaculis viverra, feugiat sit amet velit. In congue eros vel ipsum euismod dictum. Proin risus justo, facilisis vitae sodales vitae, volutpat at massa. Donec tincidunt purus in dapibus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nec libero hendrerit, cursus erat quis, facilisis sapien.
</p>