Skip to content

Instantly share code, notes, and snippets.

@mattpilott
Created September 15, 2021 22:55
Show Gist options
  • Save mattpilott/a47d411f14e3f97a3666b7fe28021c8d to your computer and use it in GitHub Desktop.
Save mattpilott/a47d411f14e3f97a3666b7fe28021c8d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$wrap: 1920;
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@mixin clamp($prop, $min, $max, $multi: (strip-unit($max) / $wrap) * 100vw) {
#{$prop}: min(max(#{$min}, #{$multi}), #{$max});
#{$prop}: clamp(#{$min}, #{$multi}, #{$max});
}
html {
--family: -apple-system, Roboto, sans-serif;
--h1: 3rem / 1.3 var(--family);
--h2: 2.5rem / 1.3 var(--family);
--h3: 2.25rem / 1.3 var(--family);
@include clamp(--h1, 2rem, 3rem);
}
html {
--family: -apple-system, Roboto, sans-serif;
--h1: 3rem / 1.3 var(--family);
--h2: 2.5rem / 1.3 var(--family);
--h3: 2.25rem / 1.3 var(--family);
--h1: min(max(2rem, 0.15625vw), 3rem);
--h1: clamp(2rem, 0.15625vw, 3rem);
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment