Skip to content

Instantly share code, notes, and snippets.

@adamg511
Created March 11, 2014 17:40
Show Gist options
  • Save adamg511/9490928 to your computer and use it in GitHub Desktop.
Save adamg511/9490928 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>
hello
</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>good-bye</p>
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
$color-one: #333;
$color-two: lighten(desaturate($color-one,25%),50%);
$heading :
(h1, 3rem, $color-one),
(h2, 2.5rem, red ),
(h3, 2rem, green),
(h4, 1.5rem, yellow),
(p, 1em, $color-two);
@each $header, $size, $color in $heading{
#{$header} {
font-size: $size;
background: $color;
color: invert($color);
}
}
$prefix: txt;
$sans: arial, sans-serif;
$serif: georgia, serif;
$font-list: (
h1 $prefix 3em 100 $serif,
h2 $prefix 2.5em 100 $sans,
h3 $prefix 2em 300 $serif,
h4 $prefix 1.75em 300 $sans,
h5 $prefix 1.5em 400 $serif,
h6 $prefix 1.25em 400 $sans,
p $prefix 1.25em 400 $sans
);
@each $value in $font-list {
#{nth($value, 1)},
.#{nth($value, 2)}-#{nth($value, 1)} {
font-size: nth($value, 3);
font-weight: nth($value, 4);
font-family: nth($value, 5);
}
}
h1 {
font-size: 3rem;
background: #333333;
color: #cccccc;
}
h2 {
font-size: 2.5rem;
background: red;
color: cyan;
}
h3 {
font-size: 2rem;
background: green;
color: #ff7fff;
}
h4 {
font-size: 1.5rem;
background: yellow;
color: blue;
}
p {
font-size: 1em;
background: #b3b3b3;
color: #4c4c4c;
}
h1,
.txt-h1 {
font-size: 3em;
font-weight: 100;
font-family: georgia, serif;
}
h2,
.txt-h2 {
font-size: 2.5em;
font-weight: 100;
font-family: arial, sans-serif;
}
h3,
.txt-h3 {
font-size: 2em;
font-weight: 300;
font-family: georgia, serif;
}
h4,
.txt-h4 {
font-size: 1.75em;
font-weight: 300;
font-family: arial, sans-serif;
}
h5,
.txt-h5 {
font-size: 1.5em;
font-weight: 400;
font-family: georgia, serif;
}
h6,
.txt-h6 {
font-size: 1.25em;
font-weight: 400;
font-family: arial, sans-serif;
}
p,
.txt-p {
font-size: 1.25em;
font-weight: 400;
font-family: arial, sans-serif;
}
<h1>
hello
</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>good-bye</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment