@function divide-cols($colnum) { @return 100%/$colnum; } @mixin fancytiles($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) { // These styles apply to all shift-columns display: inline-block; float: left; padding-left: $gutter / 2; padding-right: $gutter / 2; // IE8 fallback width: divide-cols($mobile-columns); @include respond("min-width: #{$small-break}") { width: divide-cols($mobile-columns); } @include respond("min-width: #{$medium-break}") { width: divide-cols($tablet-columns); } @include respond("min-width: #{$large-break}") { width: divide-cols($desktop-columns); } }