Skip to content

Instantly share code, notes, and snippets.

@mikestreety
Last active September 9, 2015 15:21
Show Gist options
  • Save mikestreety/debb01b7fd92c72b6f58 to your computer and use it in GitHub Desktop.
Save mikestreety/debb01b7fd92c72b6f58 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<h1>Responsive</h1>
<div>Typography</div>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// sass-mq (v3.1.2)
// ----
// Inlucde sass-mq. The media query library from the guardian.
@import "mq";
$mq-breakpoints: (
phone: 27em,
tablet: 45em,
desktop: 60em
);
@mixin propValue($map) {
@each $prop, $value in $map {
#{$prop}: #{$value};
}
}
@mixin typography($element) {
$map: map-get($typography, $element);
@include propValue(map-get($map, base));
$mq: map-remove($map, base);
@each $bp, $attr in $mq {
@include mq($bp) {
@include propValue($attr);
}
}
}
$typography: (
h1: (
base: (
font-size: 180%,
line-height: 1.2,
margin: 5rem 0 10rem
),
tablet: (
font-size: 200%
),
desktop: (
margin-top: 0
)
),
jumbo: (
base: (
font-size: 300%
),
phone: (
font-size: 400%
),
tablet: (
font-size: 500%
),
desktop: (
letter-spacing: 0.5rem,
font-size: 800%
)
)
);
h1 {
@include typography(h1);
}
h2 {
@include typography(h1);
}
div {
@include typography(jumbo);
}
h1 {
font-size: 180%;
line-height: 1.2;
margin: 5rem 0 10rem;
}
@media (min-width: 45em) {
h1 {
font-size: 200%;
}
}
@media (min-width: 60em) {
h1 {
margin-top: 0;
}
}
h2 {
font-size: 180%;
line-height: 1.2;
margin: 5rem 0 10rem;
}
@media (min-width: 45em) {
h2 {
font-size: 200%;
}
}
@media (min-width: 60em) {
h2 {
margin-top: 0;
}
}
div {
font-size: 300%;
}
@media (min-width: 27em) {
div {
font-size: 400%;
}
}
@media (min-width: 45em) {
div {
font-size: 500%;
}
}
@media (min-width: 60em) {
div {
letter-spacing: 0.5rem;
font-size: 800%;
}
}
<h1>Responsive</h1>
<div>Typography</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment