1// Mixins 2 3@function divide-width($colnum) { 4 @return 100%/($cols/$colnum); 5} 6 7 8@mixin respondingcols($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) { 9 10 // These styles apply to all shift-columns 11 display: inline-block; 12 float: left; 13 padding-left: $gutter / 2; 14 padding-right: $gutter / 2; 15 16 // IE8 fallback 17 18 19 @include respond("min-width: #{$small-break}") { 20 width: divide-width($mobile-columns); 21 } 22 23 @include respond("min-width: #{$medium-break}") { 24 width: divide-width($tablet-columns); 25 } 26 27 @include respond("min-width: #{$large-break}") { 28 width: divide-width($desktop-columns); 29 } 30 31} 32