28 lines
855 B
SCSS
28 lines
855 B
SCSS
// =============================================================================
|
|
// 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}
|
|
);
|
|
}
|