Skip to content

Instantly share code, notes, and snippets.

@davidpanzarella
Created July 25, 2016 21:55
Show Gist options
  • Save davidpanzarella/2c87bde751faa378c1abbbb52f09f9be to your computer and use it in GitHub Desktop.
Save davidpanzarella/2c87bde751faa378c1abbbb52f09f9be to your computer and use it in GitHub Desktop.
Precise control over responsive typography for Sass
// ----
// libsass (v3.3.2)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
& {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
}
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
/* Single property */
html {
@include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}
/* Multiple properties with same values */
h1 {
@include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
}
/* Single property */
html {
font-size: 14px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(14px + 4 * (100vw - 320px) / 1046);
}
}
@media screen and (min-width: 1366px) {
html {
font-size: 18px;
}
}
/* Multiple properties with same values */
h1 {
padding-bottom: 2em;
padding-top: 2em;
}
@media screen and (min-width: 20em) {
h1 {
padding-bottom: calc(2em + 2 * (100vw - 20em) / 50);
padding-top: calc(2em + 2 * (100vw - 20em) / 50);
}
}
@media screen and (min-width: 70em) {
h1 {
padding-bottom: 4em;
padding-top: 4em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment