<!-- Showcasing how we can interpolate between any two values over a set of breakpoints-->
<!-- From $small: Blue goes from 20px padding to 100px padding and stops at $large -->
<!-- From $small: Black goes from 100px height to 20px height and stops $large -->
<div class="Container">
<div class="Element"></div>
</div>
/**
* Computes a CSS calc function that betweens a value from
* A to B over viewport-width A to viewport-width B.
* Requires a media query to cap the value at B.
*/
@function between($to, $from, $toWidth, $fromWidth) {
$slope: ($to - $from) / ($toWidth - $fromWidth);
$base: $from - $slope * $fromWidth;
@return calc(#{$base} + #{100vw * $slope});
}
$small: 400px;
$large: 1000px;
/**
* Mixin to apply base and media queried values
* for the between @function.
* Defaults to/from: $small/$large, but can be overridden.
*/
@mixin between($property, $to, $from, $toWidth: $small, $fromWidth: $large) {
#{$property}: $to;
@media (min-width: $toWidth) {
#{$property}: between($to, $from, $small, $large);
}
@media (min-width: $fromWidth) {
#{$property}: $from;
}
}
* {
box-sizing: inherit;
}
html, body {
box-sizing: border-box;
}
.Container {
align-items: center;
background-color: #0087be;
border: 10px solid #f25292;
display: flex;
@include between(padding, 20px, 100px);
}
.Element {
background-color: #252A34;
border-radius: 3px;
width: 100%;
@include between(height, 100px, 20px);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.