Skip to content

Instantly share code, notes, and snippets.

@krisbulman
Created April 9, 2014 15:43
Show Gist options
  • Select an option

  • Save krisbulman/10284583 to your computer and use it in GitHub Desktop.

Select an option

Save krisbulman/10284583 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
$heading-map: (h1, 50px, 300, 6px 2px),
(h2, 42px, 300, 4px 2px),
(h3, 34px, 400, 2px),
(h4, 26px, 400, 2px),
(h5, 20px, 600, 2px),
(h6, 16px, 600, 1px 2px);
@each $h, $h-size, $h-weight, $h-pad in $heading-map {
#{$h},
.headings-#{$h} {
line-height: 20px; // arbitrary number used for example
font-size: $h-size;
font-weight: $h-weight;
padding: $h-pad;
}
}
h1,
.headings-h1 {
line-height: 20px;
font-size: 50px;
font-weight: 300;
padding: 6px 2px;
}
h2,
.headings-h2 {
line-height: 20px;
font-size: 42px;
font-weight: 300;
padding: 4px 2px;
}
h3,
.headings-h3 {
line-height: 20px;
font-size: 34px;
font-weight: 400;
padding: 2px;
}
h4,
.headings-h4 {
line-height: 20px;
font-size: 26px;
font-weight: 400;
padding: 2px;
}
h5,
.headings-h5 {
line-height: 20px;
font-size: 20px;
font-weight: 600;
padding: 2px;
}
h6,
.headings-h6 {
line-height: 20px;
font-size: 16px;
font-weight: 600;
padding: 1px 2px;
}
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment