Created
August 6, 2015 22:47
-
-
Save selfawaresoup/85d27efa972c7759e1f1 to your computer and use it in GitHub Desktop.
simplified modular scale for scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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