Skip to content

Instantly share code, notes, and snippets.

@davidallenlewis
Created March 13, 2020 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidallenlewis/112e14a99c426d7e716692c31d591243 to your computer and use it in GitHub Desktop.
Save davidallenlewis/112e14a99c426d7e716692c31d591243 to your computer and use it in GitHub Desktop.
// Min / Max http://www.sassmeister.com/gist/7f22e44ace49b5124eec
@mixin minmax(
$size-min,
$size-max,
$properties: font-size,
$vw-min: 320px,
$vw-max: 1280px
) {
@if(
unitless($size-min) or
unitless($size-max) or
unitless($vw-min) or
unitless($vw-max)
) {
@error "All min and max properties must be provided with a unit (e.g.: px)";
}
@if(
unit($size-min) == unit($size-max) and
unit($size-min) == unit($vw-min) and
unit($size-min) == unit($vw-max)
) {
@each $property in $properties {
#{$property}: $size-min;
}
@media screen and (min-width: $vw-min) {
@each $property in $properties {
#{$property}: calc(#{$size-min} + #{strip-unit($size-max - $size-min)} * (100vw - #{$vw-min}) / #{strip-unit($vw-max - $vw-min)});
}
}
@media screen and (min-width: $vw-max) {
@each $property in $properties {
#{$property}: $size-max;
}
}
} @else {
@error "All units must be the same. Incompatible units were passed:
#{unit($size-min)}, #{unit($size-max)}, #{unit($vw-min)},
#{unit($vw-max)}";
}
}
// https://css-tricks.com/snippets/sass/strip-unit-function/
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@davidallenlewis
Copy link
Author

USAGE:
@include minmax(36px, 42px, font-size);
@include minmax(240px, 360px, width);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment