Skip to content

Instantly share code, notes, and snippets.

@heaversm
Last active Sep 16, 2020
Embed
What would you like to do?
Useful sass mixins
#fluid type between a small and large screen size / small & large font size
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
@media screen and (min-width: $min-vw) {
font-size: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
);
}
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}
//fix overflow not being honored by child elements in safari (put on parent):
-webkit-mask-image: -webkit-radial-gradient(white, black);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment