Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //
- // A mixin to scale any property based on the current viewport with
- // min and max values.
- // +fluid(font-size, 300px, 500px, 12px, 30px)
- // +fluid(padding-left, 200px, 600px, 14px, 40px)
- // +fluid(height, 200px, 600px, 140px, 400px)
- //
- @function strip-unit($value)
- @return $value / ($value * 0 + 1)
- @mixin fluid($properties, $min-vw, $max-vw, $min-value, $max-value)
- @each $property in $properties
- #{$property}: $min-value
- @media screen and (min-width: $min-vw)
- @each $property in $properties
- #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
- @media screen and (min-width: $max-vw)
- @each $property in $properties
- #{$property}: $max-value
- @mixin fluid-vh($properties, $min-vh, $max-vh, $min-value, $max-value)
- @each $property in $properties
- #{$property}: $min-value
- @media screen and (min-height: $min-vh)
- @each $property in $properties
- #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vh - #{$min-vh}) / #{strip-unit($max-vh - $min-vh)})
- @media screen and (min-height: $max-vh)
- @each $property in $properties
- #{$property}: $max-value
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement