Handy SASS Mixin for Bootstrap 4 Interpolates High and Low Style Values
Here's a quick SASS mixin for developers using Bootstrap 4. Note that it only works for styles with a single value. The Motivation.... I was inspired to write this because I was working on a new custom WordPress theme where I had design mockups for Desktop and Mobile, which is great! The challenge was there was really a big difference between the Desktop and Mobile versions. The Desktop mockup depicted a screen width of 1920px, and the mobile version was for a width of 375px. The execution was really going to call for a LOT of interstitial styles, so I wanted a handy way to take the well-defined high and low values, and let it fill in the middle bits for me automatically. Equal Interval Interpolation (quick and dirty) @mixin interpolate-style( $style, $smallest, $largest ) { $interval: ( $largest - $smallest ) / ( length($grid-breakpoints) - 2 ); $idx: -1; #{$style}: $smallest; @each $key, $breakpoint in $grid-breakpoints { // skip the first two keys @if $idx > 0 { @include media-breakpoint-up($key) { #{$style}: $smallest + ( $idx * $interval ); } } $idx: $idx + 1; } } It takes the high and low values for a style, and defines the middle ones for you, breaking them into equal intervals. By equal interval, we mean the algorithm assumes the differences between each value should be equal. For example, if your highest value is 160px and lowest is 40px, and you want 4 values (including the given high and low), they would be assigned at 40px intervals: 40px (given lowest) 80px 120px 160px (given highest) Note that we are ignoring the lowest value, since in my case, I didn't want the styles to start [...]