Skip to content

Instantly share code, notes, and snippets.

@stephenhuh
Last active July 23, 2016 14:05
Show Gist options
  • Save stephenhuh/f1467d494e3fff20c1e7763f66e6e560 to your computer and use it in GitHub Desktop.
Save stephenhuh/f1467d494e3fff20c1e7763f66e6e560 to your computer and use it in GitHub Desktop.
Dynamic SASS Header Sizing
<h1>one</h1>
<h2>two</h2>
<h3>three</h3>
<h4>four</h4>
<h5>five</h5>
<h6>six</h6>
<p> this is paragraph text</p>
regular text
/* text sizing */
$body-copy-size: 15px;
$modular-scale: 1.333;
@function pow($number, $exponent){
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
} @else if $exponent < 0 {
@for $i from 1 through - $exponent{
$value: $value / $number;
}
}
@return $value;
}
//exponentiation
@for $i from 1 through 6 {
h#{$i} {
font-size: $body-copy-size * pow($modular-scale, (7 - $i));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment