Skip to content

Instantly share code, notes, and snippets.

@mikestreety
Last active November 23, 2016 15:41
Show Gist options
  • Save mikestreety/c3f431aabdf95b644d42 to your computer and use it in GitHub Desktop.
Save mikestreety/c3f431aabdf95b644d42 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.6)
// ----
/**
* Responsive Typography Example
*
* Read the full post here:
* http://www.liquidlight.co.uk/blog/article/responsive-typography-in-scss/
*/
@import "mq";
// Declare breakpoints for sass-mq.
$mq-breakpoints: (
phone: 20em,
tablet: 40em,
desktop: 60em
);
// Propvalue mixin
//
// Loops through a map and outputs each key/value
// as a css property/value.
@mixin propValue($map) {
@each $prop, $value in $map {
#{$prop}: #{$value};
}
}
// Typography mixin
//
// Gets the designated style name and outputs any
// key/values set in the “base”. After that, it loops
// through the media queries and sets up the
// responsive typography
@mixin typography($element) {
$map: map-get($typography, $element);
$base: map-get($map, base);
@include propValue($base);
$mq: map-remove($map, base);
@each $bp, $attr in $mq {
@include mq($bp) {
@include propValue($attr);
}
}
}
// Typography
$typography: (
mega: (
base: (
font-size: 210%,
font-weight: 300,
letter-spacing: -0.5px,
line-height: 1.1
),
tablet: (
font-size: 290%
),
desktop: (
font-size: 375%,
)
),
h1: (
base: (
font-size: 250%,
font-weight: 300,
line-height: 1.1,
letter-spacing: -0.5px,
),
desktop: (
font-size: 320%
)
),
h2: (
base: (
font-size: 175%,
letter-spacing: -1.5px
),
tablet: (
font-size: 187%
)
),
h3: (
base: (
font-size: 150%,
letter-spacing: -1px
),
tablet: (
font-size: 160%
)
),
h4: (
base: (
font-size: 140%,
letter-spacing: -1px
)
),
h5: (
base: (
font-size: 112.5%,
font-weight: bold,
)
),
h6: (
base: (
font-size: 112.5%,
)
),
p: (
base: (
line-height: 1.4em,
font-size: 106%
),
tablet: (
font-size: 112.5%
)
)
);
h1 {
@include typography(h1);
}
h2 {
@include typography(h2);
}
h3 {
@include typography(h3);
}
h4 {
@include typography(h4);
}
.heading {
@include typography(mega);
}
/**
* Responsive Typography Example
*
* Read the full post here:
* http://www.liquidlight.co.uk/blog/article/responsive-typography-in-scss/
*/
h1 {
font-size: 250%;
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.5px;
}
@media (min-width: 60em) {
h1 {
font-size: 320%;
}
}
h2 {
font-size: 175%;
letter-spacing: -1.5px;
}
@media (min-width: 40em) {
h2 {
font-size: 187%;
}
}
h3 {
font-size: 150%;
letter-spacing: -1px;
}
@media (min-width: 40em) {
h3 {
font-size: 160%;
}
}
h4 {
font-size: 140%;
letter-spacing: -1px;
}
.heading {
font-size: 210%;
font-weight: 300;
letter-spacing: -0.5px;
line-height: 1.1;
}
@media (min-width: 40em) {
.heading {
font-size: 290%;
}
}
@media (min-width: 60em) {
.heading {
font-size: 375%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment