// ============================================================================= // abstracts/_functions.scss // Pure SCSS helper functions. // ============================================================================= // Convert px value to rem. @function rem($px, $base: 16) { @return #{$px / $base}rem; } // Strip units from a value. @function strip-unit($value) { @return $value / ($value * 0 + 1); } // Fluid type scale using clamp(). // Usage: font-size: fluid-type(16px, 24px); @function fluid-type($min-size, $max-size, $min-vw: 375px, $max-vw: 1280px) { $min-rem: rem(strip-unit($min-size)); $max-rem: rem(strip-unit($max-size)); @return clamp( #{$min-rem}, calc(#{$min-rem} + (#{strip-unit($max-size)} - #{strip-unit($min-size)}) * ((100vw - #{$min-vw}) / (#{strip-unit($max-vw)} - #{strip-unit($min-vw)}))), #{$max-rem} ); }