Last active
February 21, 2023 18:40
-
-
Save Jakobud/7414f91142e0f540f221a3e3cafdf856 to your computer and use it in GitHub Desktop.
Linear Interpolation SASS function
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
/// linear-interpolation | |
/// Calculate the definition of a line between two points | |
/// @param $map - A SASS map of viewport widths and size value pairs | |
/// @returns A linear equation as a calc() function | |
/// @example | |
/// font-size: linear-interpolation((320px: 18px, 768px: 26px)); | |
/// @author Jake Wilson <[email protected]> | |
@function linear-interpolation($map) { | |
$keys: map-keys($map); | |
@if (length($keys) != 2) { | |
@error "linear-interpolation() $map must be exactly 2 values"; | |
} | |
// The slope | |
$m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1)); | |
// The y-intercept | |
$b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1); | |
// Determine if the sign should be positive or negative | |
$sign: "+"; | |
@if ($b < 0) { | |
$sign: "-"; | |
$b: abs($b); | |
} | |
@return calc(#{$m*100}vw #{$sign} #{$b}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment