SCSS - Intrinsic Ratio Mixin and Class Examples

//---------------------------- // Intrinsic Ratio Mixins //---------------------------- // used by @include pad-ratio // makes the content stretch x & y @mixin stretch-xy-abs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } // included in .ratio and uses padding to shape the container @mixin pad-ratio($x, $y, $selector: ".element-to-stretch") { position: relative; padding: 0 0 percentage($y/$x); height: 0; @if($selector !=false) { #{$selector} { @include stretch-xy-abs(); } } } //---------------------------- // Intrinsic Ratio Classes //---------------------------- .ratio > .cover { @include stretch-xy-abs(); } .ratio._1x1 { @include pad-ratio( 1, 1, 'cover'); } .ratio._2x1 { @include pad-ratio( 2, 1, 'cover'); } .ratio._3x1 { @include pad-ratio( 3, 1, 'cover'); } .ratio._4x3 { @include pad-ratio( 4, 3, 'cover'); } .ratio._16x9 { @include pad-ratio( 16, 9, 'cover'); } .ratio._1920x1080 { @include pad-ratio( 1920, 1080, 'cover'); } //---------------------------- // Intrinsic Ratio Example //---------------------------- .box { // put in columns float: left; width: (1/5) * 100%; // center h/v .content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } // create colors for example $colors: #56c7fa, #f76540, #ffcb05, #62cd9f, #b67baa; @for $i from 1 through length($colors) { $colors: append($colors, darken(nth($colors, $i), 25)); } // apply colors based on order @each $color in $colors { $i: index($colors, $color); &:nth-of-type(#{$i}) { background: #{$color}; } } } //---------------------------- // HTML //---------------------------- /* <div class="box"> <div class='ratio _1x1'> <div class="cover"> <div class="content">1 x 1</div> </div> </div> </div> <div class="box"> <div class='ratio _16x9'> <div class="cover"> <div class="content">16 x 9</div> </div> </div> </div> <div class="box"> <div class='ratio _4x3'> <div class="cover"> <div class="content">4 x 3</div> </div> </div> </div> <div class="box"> <div class='ratio _2x1'> <div class="cover"> <div class="content">2 x 1</div> </div> </div> </div> <div class="box"> <div class='ratio _3x1'> <div class="cover"> <div class="content">3 x 1</div> </div> </div> </div> */