.spacer-100 { height: 10px; } .spacer-200 { height: 20px; } .spacer-300 { height: 30px; } .spacer-400 { height: 40px; } .spacer-500 { height: 70px; } .spacer-600 { height: 100px; } .spacer-700 { height: 120px; } .spacer-800 { height: 150px; } .spacer-900 { height: 200px; } @media (max-width: $display-break-1) { div[class^="spacer-"] { height: 10px; } } $i: 150; @while $i > 0 { .margin-#{$i} { margin: #{$i}px; } .margin-top-#{$i} { margin-top: #{$i}px; } .margin-bottom-#{$i} { margin-bottom: #{$i}px; } .margin-right-#{$i} { margin-right: #{$i}px; } .margin-left-#{$i} { margin-left: #{$i}px; } $i: $i - 5; } $i: 150; @while $i > 0 { .padding-#{$i} { padding: #{$i}px; } .padding-top-#{$i} { padding-top: #{$i}px; } .padding-bottom-#{$i} { padding-bottom: #{$i}px; } .padding-right-#{$i} { padding-right: #{$i}px; } .padding-left-#{$i} { padding-left: #{$i}px; } $i: $i - 5; } $i: 100; @while $i > 0 { .width-#{$i} { width: #{$i}#{"%"} !important; } $i: $i - 1; }