Skip to content

Instantly share code, notes, and snippets.

@selfawaresoup
Created August 6, 2015 22:47
Show Gist options
  • Save selfawaresoup/85d27efa972c7759e1f1 to your computer and use it in GitHub Desktop.
Save selfawaresoup/85d27efa972c7759e1f1 to your computer and use it in GitHub Desktop.
simplified modular scale for scss
$phi: 1.61803398874989; //"Golden Ratio"
$base-size: 1rem;
@function size($n) {
$size: $base-size;
@if $n > 0 {
@for $i from 1 through $n {
$size: $size * $phi;
}
}
@return $size;
}
@import "modular";
html {
font-size: 16px; //define what 1rem actually is
}
/*
* Now use size(n) to define all other sizes, margins, paddings, etc.
* The following are just a few examples
*/
body {
// properties for default text, base font size is size(0)
font-size: size(0);
line-height: size(1);
}
h3, h4, h5, h6 {
font-size: size(0);
line-height: size(1);
}
h2 {
font-size: size(1);
line-height: size(2);
}
h1 {
font-size: size(2);
line-height: size(3);
}
p {
margin-top: size(1);
margin-bottom: size(1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment