Skip to content

Instantly share code, notes, and snippets.

@lunelson
Last active December 16, 2015 18:59
Show Gist options
  • Save lunelson/5481754 to your computer and use it in GitHub Desktop.
Save lunelson/5481754 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com, the Sass playground.
// SCRATCH
// typo source definitions
@font-face {}
$base-family: Helvetica;
$heading-family: Georgia;
// basic typo sizing
$base-font-size: 16px !default;
$base-line-height: 24px !default;
$heading-font-sizes: 10px 14px 18px 20px 24px 28px;
// basic typo styling
%base-font-style {
font-family: sans-serif;
}
%heading-font-style {
font-family: serif;
}
@mixin font-size($font-size, $line-height:true){
font-size:$font-size;
font-size:($font-size / $base-font-size)*1rem;
@if $line-height == true{
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
}
}
// html and body setup
html {}
body {}
// heading setup
#{enumerate("h",1,6,"")},#{enumerate(".h",1,6,"")} { @extend %heading-font-style; }
@for $n from 1 through 6 {
h#{$n},.h#{$n} {
@include font-size(nth($heading-font-sizes,length($heading-font-sizes) + 1 - $n));
}
}
@font-face {}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: serif;
}
h1, .h1 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.71429;
}
h2, .h2 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
h3, .h3 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
h4, .h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333;
}
h5, .h5 {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71429;
}
h6, .h6 {
font-size: 10px;
font-size: 0.625rem;
line-height: 2.4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment