Last active
January 5, 2016 15:47
-
-
Save stuyam/42a8e683887350acd265 to your computer and use it in GitHub Desktop.
This is a Responsive Interpolation mixin for SASS! I built it while building my Poet CSS library http://yamartino.github.io/Poet. Simple give it an element like "h1", then set the size you want that text to be on a large screen, and on a small screen, and it will handle interpolating between the two making a smooth resizing of the text.
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
// Responsive interpolation mixin, great for making resposive text, but can work on anything. | |
@mixin interpolate($elements, $min-size, $max-size, $precision: 10, $property: 'font-size', $unit: 'rem', $min-width: 360, $max-width: 960){ | |
$increment: ($max-size - $min-size)/$precision; | |
@for $i from $precision through 0{ | |
@if $i == $precision{ | |
#{$elements}{ | |
#{$property}: #{$max-size - $i * $increment}#{$unit}; | |
} | |
} @else { | |
@media only screen and (min-width: #{$max-width - $i * ($max-width - $min-width)/$precision}px) { | |
#{$elements}{ | |
#{$property}: #{$max-size - $i * $increment}#{$unit}; | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment