Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive helper classes for Bootstrap style margins, padding, aligning, and displaying per screen size
/* responsive.less
* ~~~~~~~~~~~~~~~
*
* Responsive helper classes for Bootstrap style margins, padding, aligning, and displaying per screen size.
* Works along with Bootstrap3.
*/
//== Media queries breakpoints from Bootstrap3
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
/* Margins
*/
@media (max-width: @screen-xs-max) {
.m-top-xs-0 { margin-top: 0; }
.m-top-xs-5 { margin-top: 5px; }
.m-top-xs-10 { margin-top: 10px; }
.m-top-xs-20 { margin-top: 20px; }
.m-top-xs-30 { margin-top: 30px; }
.m-top-xs-40 { margin-top: 40px; }
.m-top-xs-50 { margin-top: 50px; }
.m-top-xs-60 { margin-top: 60px; }
.m-top-xs-70 { margin-top: 70px; }
.m-top-xs-80 { margin-top: 80px; }
.m-top-xs-90 { margin-top: 90px; }
.m-top-xs-100 { margin-top: 100px; }
.m-top-xs-110 { margin-top: 110px; }
.m-top-xs-120 { margin-top: 120px; }
.m-top-xs-130 { margin-top: 130px; }
.m-top-xs-140 { margin-top: 140px; }
.m-top-xs-150 { margin-top: 150px; }
.m-top-xs-160 { margin-top: 160px; }
.m-top-xs-170 { margin-top: 170px; }
.m-top-xs-180 { margin-top: 180px; }
.m-top-xs-190 { margin-top: 190px; }
.m-top-xs-200 { margin-top: 200px; }
.m-bottom-xs-0 { margin-bottom: 0; }
.m-bottom-xs-5 { margin-bottom: 5px; }
.m-bottom-xs-10 { margin-bottom: 10px; }
.m-bottom-xs-20 { margin-bottom: 20px; }
.m-bottom-xs-30 { margin-bottom: 30px; }
.m-bottom-xs-40 { margin-bottom: 40px; }
.m-bottom-xs-50 { margin-bottom: 50px; }
.m-bottom-xs-60 { margin-bottom: 60px; }
.m-bottom-xs-70 { margin-bottom: 70px; }
.m-bottom-xs-80 { margin-bottom: 80px; }
.m-bottom-xs-90 { margin-bottom: 90px; }
.m-bottom-xs-100 { margin-bottom: 100px; }
.m-bottom-xs-110 { margin-bottom: 110px; }
.m-bottom-xs-120 { margin-bottom: 120px; }
.m-bottom-xs-130 { margin-bottom: 130px; }
.m-bottom-xs-140 { margin-bottom: 140px; }
.m-bottom-xs-150 { margin-bottom: 150px; }
.m-bottom-xs-160 { margin-bottom: 160px; }
.m-bottom-xs-170 { margin-bottom: 170px; }
.m-bottom-xs-180 { margin-bottom: 180px; }
.m-bottom-xs-190 { margin-bottom: 190px; }
.m-bottom-xs-200 { margin-bottom: 200px; }
.m-left-xs-0 { margin-left: 0; }
.m-left-xs-5 { margin-left: 5px; }
.m-left-xs-10 { margin-left: 10px; }
.m-left-xs-20 { margin-left: 20px; }
.m-left-xs-30 { margin-left: 30px; }
.m-left-xs-40 { margin-left: 40px; }
.m-left-xs-50 { margin-left: 50px; }
.m-left-xs-60 { margin-left: 60px; }
.m-left-xs-70 { margin-left: 70px; }
.m-left-xs-80 { margin-left: 80px; }
.m-left-xs-90 { margin-left: 90px; }
.m-left-xs-100 { margin-left: 100px; }
.m-left-xs-110 { margin-left: 110px; }
.m-left-xs-120 { margin-left: 120px; }
.m-left-xs-130 { margin-left: 130px; }
.m-left-xs-140 { margin-left: 140px; }
.m-left-xs-150 { margin-left: 150px; }
.m-left-xs-160 { margin-left: 160px; }
.m-left-xs-170 { margin-left: 170px; }
.m-left-xs-180 { margin-left: 180px; }
.m-left-xs-190 { margin-left: 190px; }
.m-left-xs-200 { margin-left: 200px; }
.m-right-xs-0 { margin-right: 0; }
.m-right-xs-5 { margin-right: 5px; }
.m-right-xs-10 { margin-right: 10px; }
.m-right-xs-20 { margin-right: 20px; }
.m-right-xs-30 { margin-right: 30px; }
.m-right-xs-40 { margin-right: 40px; }
.m-right-xs-50 { margin-right: 50px; }
.m-right-xs-60 { margin-right: 60px; }
.m-right-xs-70 { margin-right: 70px; }
.m-right-xs-80 { margin-right: 80px; }
.m-right-xs-90 { margin-right: 90px; }
.m-right-xs-100 { margin-right: 100px; }
.m-right-xs-110 { margin-right: 110px; }
.m-right-xs-120 { margin-right: 120px; }
.m-right-xs-130 { margin-right: 130px; }
.m-right-xs-140 { margin-right: 140px; }
.m-right-xs-150 { margin-right: 150px; }
.m-right-xs-160 { margin-right: 160px; }
.m-right-xs-170 { margin-right: 170px; }
.m-right-xs-180 { margin-right: 180px; }
.m-right-xs-190 { margin-right: 190px; }
.m-right-xs-200 { margin-right: 200px; }
}
@media (min-width: @screen-sm-min) {
.m-top-sm-0 { margin-top: 0; }
.m-top-sm-5 { margin-top: 5px; }
.m-top-sm-10 { margin-top: 10px; }
.m-top-sm-20 { margin-top: 20px; }
.m-top-sm-30 { margin-top: 30px; }
.m-top-sm-40 { margin-top: 40px; }
.m-top-sm-50 { margin-top: 50px; }
.m-top-sm-60 { margin-top: 60px; }
.m-top-sm-70 { margin-top: 70px; }
.m-top-sm-80 { margin-top: 80px; }
.m-top-sm-90 { margin-top: 90px; }
.m-top-sm-100 { margin-top: 100px; }
.m-top-sm-110 { margin-top: 110px; }
.m-top-sm-120 { margin-top: 120px; }
.m-top-sm-130 { margin-top: 130px; }
.m-top-sm-140 { margin-top: 140px; }
.m-top-sm-150 { margin-top: 150px; }
.m-top-sm-160 { margin-top: 160px; }
.m-top-sm-170 { margin-top: 170px; }
.m-top-sm-180 { margin-top: 180px; }
.m-top-sm-190 { margin-top: 190px; }
.m-top-sm-200 { margin-top: 200px; }
.m-bottom-sm-0 { margin-bottom: 0; }
.m-bottom-sm-5 { margin-bottom: 5px; }
.m-bottom-sm-10 { margin-bottom: 10px; }
.m-bottom-sm-20 { margin-bottom: 20px; }
.m-bottom-sm-30 { margin-bottom: 30px; }
.m-bottom-sm-40 { margin-bottom: 40px; }
.m-bottom-sm-50 { margin-bottom: 50px; }
.m-bottom-sm-60 { margin-bottom: 60px; }
.m-bottom-sm-70 { margin-bottom: 70px; }
.m-bottom-sm-80 { margin-bottom: 80px; }
.m-bottom-sm-90 { margin-bottom: 90px; }
.m-bottom-sm-100 { margin-bottom: 100px; }
.m-bottom-sm-110 { margin-bottom: 110px; }
.m-bottom-sm-120 { margin-bottom: 120px; }
.m-bottom-sm-130 { margin-bottom: 130px; }
.m-bottom-sm-140 { margin-bottom: 140px; }
.m-bottom-sm-150 { margin-bottom: 150px; }
.m-bottom-sm-160 { margin-bottom: 160px; }
.m-bottom-sm-170 { margin-bottom: 170px; }
.m-bottom-sm-180 { margin-bottom: 180px; }
.m-bottom-sm-190 { margin-bottom: 190px; }
.m-bottom-sm-200 { margin-bottom: 200px; }
.m-left-sm-0 { margin-left: 0; }
.m-left-sm-5 { margin-left: 5px; }
.m-left-sm-10 { margin-left: 10px; }
.m-left-sm-20 { margin-left: 20px; }
.m-left-sm-30 { margin-left: 30px; }
.m-left-sm-40 { margin-left: 40px; }
.m-left-sm-50 { margin-left: 50px; }
.m-left-sm-60 { margin-left: 60px; }
.m-left-sm-70 { margin-left: 70px; }
.m-left-sm-80 { margin-left: 80px; }
.m-left-sm-90 { margin-left: 90px; }
.m-left-sm-100 { margin-left: 100px; }
.m-left-sm-110 { margin-left: 110px; }
.m-left-sm-120 { margin-left: 120px; }
.m-left-sm-130 { margin-left: 130px; }
.m-left-sm-140 { margin-left: 140px; }
.m-left-sm-150 { margin-left: 150px; }
.m-left-sm-160 { margin-left: 160px; }
.m-left-sm-170 { margin-left: 170px; }
.m-left-sm-180 { margin-left: 180px; }
.m-left-sm-190 { margin-left: 190px; }
.m-left-sm-200 { margin-left: 200px; }
.m-right-sm-0 { margin-right: 0; }
.m-right-sm-5 { margin-right: 5px; }
.m-right-sm-10 { margin-right: 10px; }
.m-right-sm-20 { margin-right: 20px; }
.m-right-sm-30 { margin-right: 30px; }
.m-right-sm-40 { margin-right: 40px; }
.m-right-sm-50 { margin-right: 50px; }
.m-right-sm-60 { margin-right: 60px; }
.m-right-sm-70 { margin-right: 70px; }
.m-right-sm-80 { margin-right: 80px; }
.m-right-sm-90 { margin-right: 90px; }
.m-right-sm-100 { margin-right: 100px; }
.m-right-sm-110 { margin-right: 110px; }
.m-right-sm-120 { margin-right: 120px; }
.m-right-sm-130 { margin-right: 130px; }
.m-right-sm-140 { margin-right: 140px; }
.m-right-sm-150 { margin-right: 150px; }
.m-right-sm-160 { margin-right: 160px; }
.m-right-sm-170 { margin-right: 170px; }
.m-right-sm-180 { margin-right: 180px; }
.m-right-sm-190 { margin-right: 190px; }
.m-right-sm-200 { margin-right: 200px; }
}
@media (min-width: @screen-md-min) {
.m-top-md-0 { margin-top: 0; }
.m-top-md-5 { margin-top: 5px; }
.m-top-md-10 { margin-top: 10px; }
.m-top-md-20 { margin-top: 20px; }
.m-top-md-30 { margin-top: 30px; }
.m-top-md-40 { margin-top: 40px; }
.m-top-md-50 { margin-top: 50px; }
.m-top-md-60 { margin-top: 60px; }
.m-top-md-70 { margin-top: 70px; }
.m-top-md-80 { margin-top: 80px; }
.m-top-md-90 { margin-top: 90px; }
.m-top-md-100 { margin-top: 100px; }
.m-top-md-110 { margin-top: 110px; }
.m-top-md-120 { margin-top: 120px; }
.m-top-md-130 { margin-top: 130px; }
.m-top-md-140 { margin-top: 140px; }
.m-top-md-150 { margin-top: 150px; }
.m-top-md-160 { margin-top: 160px; }
.m-top-md-170 { margin-top: 170px; }
.m-top-md-180 { margin-top: 180px; }
.m-top-md-190 { margin-top: 190px; }
.m-top-md-200 { margin-top: 200px; }
.m-bottom-md-0 { margin-bottom: 0; }
.m-bottom-md-5 { margin-bottom: 5px; }
.m-bottom-md-10 { margin-bottom: 10px; }
.m-bottom-md-20 { margin-bottom: 20px; }
.m-bottom-md-30 { margin-bottom: 30px; }
.m-bottom-md-40 { margin-bottom: 40px; }
.m-bottom-md-50 { margin-bottom: 50px; }
.m-bottom-md-60 { margin-bottom: 60px; }
.m-bottom-md-70 { margin-bottom: 70px; }
.m-bottom-md-80 { margin-bottom: 80px; }
.m-bottom-md-90 { margin-bottom: 90px; }
.m-bottom-md-100 { margin-bottom: 100px; }
.m-bottom-md-110 { margin-bottom: 110px; }
.m-bottom-md-120 { margin-bottom: 120px; }
.m-bottom-md-130 { margin-bottom: 130px; }
.m-bottom-md-140 { margin-bottom: 140px; }
.m-bottom-md-150 { margin-bottom: 150px; }
.m-bottom-md-160 { margin-bottom: 160px; }
.m-bottom-md-170 { margin-bottom: 170px; }
.m-bottom-md-180 { margin-bottom: 180px; }
.m-bottom-md-190 { margin-bottom: 190px; }
.m-bottom-md-200 { margin-bottom: 200px; }
.m-left-md-0 { margin-left: 0; }
.m-left-md-5 { margin-left: 5px; }
.m-left-md-10 { margin-left: 10px; }
.m-left-md-20 { margin-left: 20px; }
.m-left-md-30 { margin-left: 30px; }
.m-left-md-40 { margin-left: 40px; }
.m-left-md-50 { margin-left: 50px; }
.m-left-md-60 { margin-left: 60px; }
.m-left-md-70 { margin-left: 70px; }
.m-left-md-80 { margin-left: 80px; }
.m-left-md-90 { margin-left: 90px; }
.m-left-md-100 { margin-left: 100px; }
.m-left-md-110 { margin-left: 110px; }
.m-left-md-120 { margin-left: 120px; }
.m-left-md-130 { margin-left: 130px; }
.m-left-md-140 { margin-left: 140px; }
.m-left-md-150 { margin-left: 150px; }
.m-left-md-160 { margin-left: 160px; }
.m-left-md-170 { margin-left: 170px; }
.m-left-md-180 { margin-left: 180px; }
.m-left-md-190 { margin-left: 190px; }
.m-left-md-200 { margin-left: 200px; }
.m-right-md-0 { margin-right: 0; }
.m-right-md-5 { margin-right: 5px; }
.m-right-md-10 { margin-right: 10px; }
.m-right-md-20 { margin-right: 20px; }
.m-right-md-30 { margin-right: 30px; }
.m-right-md-40 { margin-right: 40px; }
.m-right-md-50 { margin-right: 50px; }
.m-right-md-60 { margin-right: 60px; }
.m-right-md-70 { margin-right: 70px; }
.m-right-md-80 { margin-right: 80px; }
.m-right-md-90 { margin-right: 90px; }
.m-right-md-100 { margin-right: 100px; }
.m-right-md-110 { margin-right: 110px; }
.m-right-md-120 { margin-right: 120px; }
.m-right-md-130 { margin-right: 130px; }
.m-right-md-140 { margin-right: 140px; }
.m-right-md-150 { margin-right: 150px; }
.m-right-md-160 { margin-right: 160px; }
.m-right-md-170 { margin-right: 170px; }
.m-right-md-180 { margin-right: 180px; }
.m-right-md-190 { margin-right: 190px; }
.m-right-md-200 { margin-right: 200px; }
}
@media (min-width: @screen-lg-min) {
.m-top-lg-0 { margin-top: 0; }
.m-top-lg-5 { margin-top: 5px; }
.m-top-lg-10 { margin-top: 10px; }
.m-top-lg-20 { margin-top: 20px; }
.m-top-lg-30 { margin-top: 30px; }
.m-top-lg-40 { margin-top: 40px; }
.m-top-lg-50 { margin-top: 50px; }
.m-top-lg-60 { margin-top: 60px; }
.m-top-lg-70 { margin-top: 70px; }
.m-top-lg-80 { margin-top: 80px; }
.m-top-lg-90 { margin-top: 90px; }
.m-top-lg-100 { margin-top: 100px; }
.m-top-lg-110 { margin-top: 110px; }
.m-top-lg-120 { margin-top: 120px; }
.m-top-lg-130 { margin-top: 130px; }
.m-top-lg-140 { margin-top: 140px; }
.m-top-lg-150 { margin-top: 150px; }
.m-top-lg-160 { margin-top: 160px; }
.m-top-lg-170 { margin-top: 170px; }
.m-top-lg-180 { margin-top: 180px; }
.m-top-lg-190 { margin-top: 190px; }
.m-top-lg-200 { margin-top: 200px; }
.m-bottom-lg-0 { margin-bottom: 0; }
.m-bottom-lg-5 { margin-bottom: 5px; }
.m-bottom-lg-10 { margin-bottom: 10px; }
.m-bottom-lg-20 { margin-bottom: 20px; }
.m-bottom-lg-30 { margin-bottom: 30px; }
.m-bottom-lg-40 { margin-bottom: 40px; }
.m-bottom-lg-50 { margin-bottom: 50px; }
.m-bottom-lg-60 { margin-bottom: 60px; }
.m-bottom-lg-70 { margin-bottom: 70px; }
.m-bottom-lg-80 { margin-bottom: 80px; }
.m-bottom-lg-90 { margin-bottom: 90px; }
.m-bottom-lg-100 { margin-bottom: 100px; }
.m-bottom-lg-110 { margin-bottom: 110px; }
.m-bottom-lg-120 { margin-bottom: 120px; }
.m-bottom-lg-130 { margin-bottom: 130px; }
.m-bottom-lg-140 { margin-bottom: 140px; }
.m-bottom-lg-150 { margin-bottom: 150px; }
.m-bottom-lg-160 { margin-bottom: 160px; }
.m-bottom-lg-170 { margin-bottom: 170px; }
.m-bottom-lg-180 { margin-bottom: 180px; }
.m-bottom-lg-190 { margin-bottom: 190px; }
.m-bottom-lg-200 { margin-bottom: 200px; }
.m-left-lg-0 { margin-left: 0; }
.m-left-lg-5 { margin-left: 5px; }
.m-left-lg-10 { margin-left: 10px; }
.m-left-lg-20 { margin-left: 20px; }
.m-left-lg-30 { margin-left: 30px; }
.m-left-lg-40 { margin-left: 40px; }
.m-left-lg-50 { margin-left: 50px; }
.m-left-lg-60 { margin-left: 60px; }
.m-left-lg-70 { margin-left: 70px; }
.m-left-lg-80 { margin-left: 80px; }
.m-left-lg-90 { margin-left: 90px; }
.m-left-lg-100 { margin-left: 100px; }
.m-left-lg-110 { margin-left: 110px; }
.m-left-lg-120 { margin-left: 120px; }
.m-left-lg-130 { margin-left: 130px; }
.m-left-lg-140 { margin-left: 140px; }
.m-left-lg-150 { margin-left: 150px; }
.m-left-lg-160 { margin-left: 160px; }
.m-left-lg-170 { margin-left: 170px; }
.m-left-lg-180 { margin-left: 180px; }
.m-left-lg-190 { margin-left: 190px; }
.m-left-lg-200 { margin-left: 200px; }
.m-right-lg-0 { margin-right: 0; }
.m-right-lg-5 { margin-right: 5px; }
.m-right-lg-10 { margin-right: 10px; }
.m-right-lg-20 { margin-right: 20px; }
.m-right-lg-30 { margin-right: 30px; }
.m-right-lg-40 { margin-right: 40px; }
.m-right-lg-50 { margin-right: 50px; }
.m-right-lg-60 { margin-right: 60px; }
.m-right-lg-70 { margin-right: 70px; }
.m-right-lg-80 { margin-right: 80px; }
.m-right-lg-90 { margin-right: 90px; }
.m-right-lg-100 { margin-right: 100px; }
.m-right-lg-110 { margin-right: 110px; }
.m-right-lg-120 { margin-right: 120px; }
.m-right-lg-130 { margin-right: 130px; }
.m-right-lg-140 { margin-right: 140px; }
.m-right-lg-150 { margin-right: 150px; }
.m-right-lg-160 { margin-right: 160px; }
.m-right-lg-170 { margin-right: 170px; }
.m-right-lg-180 { margin-right: 180px; }
.m-right-lg-190 { margin-right: 190px; }
.m-right-lg-200 { margin-right: 200px; }
}
/* Paddings
*/
@media (max-width: @screen-xs-max) {
.p-top-xs-0 { padding-top: 0; }
.p-top-xs-5 { padding-top: 5px; }
.p-top-xs-10 { padding-top: 10px; }
.p-top-xs-20 { padding-top: 20px; }
.p-top-xs-30 { padding-top: 30px; }
.p-top-xs-40 { padding-top: 40px; }
.p-top-xs-50 { padding-top: 50px; }
.p-top-xs-60 { padding-top: 60px; }
.p-top-xs-70 { padding-top: 70px; }
.p-top-xs-80 { padding-top: 80px; }
.p-top-xs-90 { padding-top: 90px; }
.p-top-xs-100 { padding-top: 100px; }
.p-top-xs-110 { padding-top: 110px; }
.p-top-xs-120 { padding-top: 120px; }
.p-top-xs-130 { padding-top: 130px; }
.p-top-xs-140 { padding-top: 140px; }
.p-top-xs-150 { padding-top: 150px; }
.p-top-xs-160 { padding-top: 160px; }
.p-top-xs-170 { padding-top: 170px; }
.p-top-xs-180 { padding-top: 180px; }
.p-top-xs-190 { padding-top: 190px; }
.p-top-xs-200 { padding-top: 200px; }
.p-bottom-xs-0 { padding-bottom: 0; }
.p-bottom-xs-5 { padding-bottom: 5px; }
.p-bottom-xs-10 { padding-bottom: 10px; }
.p-bottom-xs-20 { padding-bottom: 20px; }
.p-bottom-xs-30 { padding-bottom: 30px; }
.p-bottom-xs-40 { padding-bottom: 40px; }
.p-bottom-xs-50 { padding-bottom: 50px; }
.p-bottom-xs-60 { padding-bottom: 60px; }
.p-bottom-xs-70 { padding-bottom: 70px; }
.p-bottom-xs-80 { padding-bottom: 80px; }
.p-bottom-xs-90 { padding-bottom: 90px; }
.p-bottom-xs-100 { padding-bottom: 100px; }
.p-bottom-xs-110 { padding-bottom: 110px; }
.p-bottom-xs-120 { padding-bottom: 120px; }
.p-bottom-xs-130 { padding-bottom: 130px; }
.p-bottom-xs-140 { padding-bottom: 140px; }
.p-bottom-xs-150 { padding-bottom: 150px; }
.p-bottom-xs-160 { padding-bottom: 160px; }
.p-bottom-xs-170 { padding-bottom: 170px; }
.p-bottom-xs-180 { padding-bottom: 180px; }
.p-bottom-xs-190 { padding-bottom: 190px; }
.p-bottom-xs-200 { padding-bottom: 200px; }
.p-left-xs-0 { padding-left: 0; }
.p-left-xs-5 { padding-left: 5px; }
.p-left-xs-10 { padding-left: 10px; }
.p-left-xs-20 { padding-left: 20px; }
.p-left-xs-30 { padding-left: 30px; }
.p-left-xs-40 { padding-left: 40px; }
.p-left-xs-50 { padding-left: 50px; }
.p-left-xs-60 { padding-left: 60px; }
.p-left-xs-70 { padding-left: 70px; }
.p-left-xs-80 { padding-left: 80px; }
.p-left-xs-90 { padding-left: 90px; }
.p-left-xs-100 { padding-left: 100px; }
.p-left-xs-110 { padding-left: 110px; }
.p-left-xs-120 { padding-left: 120px; }
.p-left-xs-130 { padding-left: 130px; }
.p-left-xs-140 { padding-left: 140px; }
.p-left-xs-150 { padding-left: 150px; }
.p-left-xs-160 { padding-left: 160px; }
.p-left-xs-170 { padding-left: 170px; }
.p-left-xs-180 { padding-left: 180px; }
.p-left-xs-190 { padding-left: 190px; }
.p-left-xs-200 { padding-left: 200px; }
.p-right-xs-0 { padding-right: 0; }
.p-right-xs-5 { padding-right: 5px; }
.p-right-xs-10 { padding-right: 10px; }
.p-right-xs-20 { padding-right: 20px; }
.p-right-xs-30 { padding-right: 30px; }
.p-right-xs-40 { padding-right: 40px; }
.p-right-xs-50 { padding-right: 50px; }
.p-right-xs-60 { padding-right: 60px; }
.p-right-xs-70 { padding-right: 70px; }
.p-right-xs-80 { padding-right: 80px; }
.p-right-xs-90 { padding-right: 90px; }
.p-right-xs-100 { padding-right: 100px; }
.p-right-xs-110 { padding-right: 110px; }
.p-right-xs-120 { padding-right: 120px; }
.p-right-xs-130 { padding-right: 130px; }
.p-right-xs-140 { padding-right: 140px; }
.p-right-xs-150 { padding-right: 150px; }
.p-right-xs-160 { padding-right: 160px; }
.p-right-xs-170 { padding-right: 170px; }
.p-right-xs-180 { padding-right: 180px; }
.p-right-xs-190 { padding-right: 190px; }
.p-right-xs-200 { padding-right: 200px; }
}
@media (min-width: @screen-sm-min) {
.p-top-sm-0 { padding-top: 0; }
.p-top-sm-5 { padding-top: 5px; }
.p-top-sm-10 { padding-top: 10px; }
.p-top-sm-20 { padding-top: 20px; }
.p-top-sm-30 { padding-top: 30px; }
.p-top-sm-40 { padding-top: 40px; }
.p-top-sm-50 { padding-top: 50px; }
.p-top-sm-60 { padding-top: 60px; }
.p-top-sm-70 { padding-top: 70px; }
.p-top-sm-80 { padding-top: 80px; }
.p-top-sm-90 { padding-top: 90px; }
.p-top-sm-100 { padding-top: 100px; }
.p-top-sm-110 { padding-top: 110px; }
.p-top-sm-120 { padding-top: 120px; }
.p-top-sm-130 { padding-top: 130px; }
.p-top-sm-140 { padding-top: 140px; }
.p-top-sm-150 { padding-top: 150px; }
.p-top-sm-160 { padding-top: 160px; }
.p-top-sm-170 { padding-top: 170px; }
.p-top-sm-180 { padding-top: 180px; }
.p-top-sm-190 { padding-top: 190px; }
.p-top-sm-200 { padding-top: 200px; }
.p-bottom-sm-0 { padding-bottom: 0; }
.p-bottom-sm-5 { padding-bottom: 5px; }
.p-bottom-sm-10 { padding-bottom: 10px; }
.p-bottom-sm-20 { padding-bottom: 20px; }
.p-bottom-sm-30 { padding-bottom: 30px; }
.p-bottom-sm-40 { padding-bottom: 40px; }
.p-bottom-sm-50 { padding-bottom: 50px; }
.p-bottom-sm-60 { padding-bottom: 60px; }
.p-bottom-sm-70 { padding-bottom: 70px; }
.p-bottom-sm-80 { padding-bottom: 80px; }
.p-bottom-sm-90 { padding-bottom: 90px; }
.p-bottom-sm-100 { padding-bottom: 100px; }
.p-bottom-sm-110 { padding-bottom: 110px; }
.p-bottom-sm-120 { padding-bottom: 120px; }
.p-bottom-sm-130 { padding-bottom: 130px; }
.p-bottom-sm-140 { padding-bottom: 140px; }
.p-bottom-sm-150 { padding-bottom: 150px; }
.p-bottom-sm-160 { padding-bottom: 160px; }
.p-bottom-sm-170 { padding-bottom: 170px; }
.p-bottom-sm-180 { padding-bottom: 180px; }
.p-bottom-sm-190 { padding-bottom: 190px; }
.p-bottom-sm-200 { padding-bottom: 200px; }
.p-left-sm-0 { padding-left: 0; }
.p-left-sm-5 { padding-left: 5px; }
.p-left-sm-10 { padding-left: 10px; }
.p-left-sm-20 { padding-left: 20px; }
.p-left-sm-30 { padding-left: 30px; }
.p-left-sm-40 { padding-left: 40px; }
.p-left-sm-50 { padding-left: 50px; }
.p-left-sm-60 { padding-left: 60px; }
.p-left-sm-70 { padding-left: 70px; }
.p-left-sm-80 { padding-left: 80px; }
.p-left-sm-90 { padding-left: 90px; }
.p-left-sm-100 { padding-left: 100px; }
.p-left-sm-110 { padding-left: 110px; }
.p-left-sm-120 { padding-left: 120px; }
.p-left-sm-130 { padding-left: 130px; }
.p-left-sm-140 { padding-left: 140px; }
.p-left-sm-150 { padding-left: 150px; }
.p-left-sm-160 { padding-left: 160px; }
.p-left-sm-170 { padding-left: 170px; }
.p-left-sm-180 { padding-left: 180px; }
.p-left-sm-190 { padding-left: 190px; }
.p-left-sm-200 { padding-left: 200px; }
.p-right-sm-0 { padding-right: 0; }
.p-right-sm-5 { padding-right: 5px; }
.p-right-sm-10 { padding-right: 10px; }
.p-right-sm-20 { padding-right: 20px; }
.p-right-sm-30 { padding-right: 30px; }
.p-right-sm-40 { padding-right: 40px; }
.p-right-sm-50 { padding-right: 50px; }
.p-right-sm-60 { padding-right: 60px; }
.p-right-sm-70 { padding-right: 70px; }
.p-right-sm-80 { padding-right: 80px; }
.p-right-sm-90 { padding-right: 90px; }
.p-right-sm-100 { padding-right: 100px; }
.p-right-sm-110 { padding-right: 110px; }
.p-right-sm-120 { padding-right: 120px; }
.p-right-sm-130 { padding-right: 130px; }
.p-right-sm-140 { padding-right: 140px; }
.p-right-sm-150 { padding-right: 150px; }
.p-right-sm-160 { padding-right: 160px; }
.p-right-sm-170 { padding-right: 170px; }
.p-right-sm-180 { padding-right: 180px; }
.p-right-sm-190 { padding-right: 190px; }
.p-right-sm-200 { padding-right: 200px; }
}
@media (min-width: @screen-md-min) {
.p-top-md-0 { padding-top: 0; }
.p-top-md-5 { padding-top: 5px; }
.p-top-md-10 { padding-top: 10px; }
.p-top-md-20 { padding-top: 20px; }
.p-top-md-30 { padding-top: 30px; }
.p-top-md-40 { padding-top: 40px; }
.p-top-md-50 { padding-top: 50px; }
.p-top-md-60 { padding-top: 60px; }
.p-top-md-70 { padding-top: 70px; }
.p-top-md-80 { padding-top: 80px; }
.p-top-md-90 { padding-top: 90px; }
.p-top-md-100 { padding-top: 100px; }
.p-top-md-110 { padding-top: 110px; }
.p-top-md-120 { padding-top: 120px; }
.p-top-md-130 { padding-top: 130px; }
.p-top-md-140 { padding-top: 140px; }
.p-top-md-150 { padding-top: 150px; }
.p-top-md-160 { padding-top: 160px; }
.p-top-md-170 { padding-top: 170px; }
.p-top-md-180 { padding-top: 180px; }
.p-top-md-190 { padding-top: 190px; }
.p-top-md-200 { padding-top: 200px; }
.p-bottom-md-0 { padding-bottom: 0; }
.p-bottom-md-5 { padding-bottom: 5px; }
.p-bottom-md-10 { padding-bottom: 10px; }
.p-bottom-md-20 { padding-bottom: 20px; }
.p-bottom-md-30 { padding-bottom: 30px; }
.p-bottom-md-40 { padding-bottom: 40px; }
.p-bottom-md-50 { padding-bottom: 50px; }
.p-bottom-md-60 { padding-bottom: 60px; }
.p-bottom-md-70 { padding-bottom: 70px; }
.p-bottom-md-80 { padding-bottom: 80px; }
.p-bottom-md-90 { padding-bottom: 90px; }
.p-bottom-md-100 { padding-bottom: 100px; }
.p-bottom-md-110 { padding-bottom: 110px; }
.p-bottom-md-120 { padding-bottom: 120px; }
.p-bottom-md-130 { padding-bottom: 130px; }
.p-bottom-md-140 { padding-bottom: 140px; }
.p-bottom-md-150 { padding-bottom: 150px; }
.p-bottom-md-160 { padding-bottom: 160px; }
.p-bottom-md-170 { padding-bottom: 170px; }
.p-bottom-md-180 { padding-bottom: 180px; }
.p-bottom-md-190 { padding-bottom: 190px; }
.p-bottom-md-200 { padding-bottom: 200px; }
.p-left-md-0 { padding-left: 0; }
.p-left-md-5 { padding-left: 5px; }
.p-left-md-10 { padding-left: 10px; }
.p-left-md-20 { padding-left: 20px; }
.p-left-md-30 { padding-left: 30px; }
.p-left-md-40 { padding-left: 40px; }
.p-left-md-50 { padding-left: 50px; }
.p-left-md-60 { padding-left: 60px; }
.p-left-md-70 { padding-left: 70px; }
.p-left-md-80 { padding-left: 80px; }
.p-left-md-90 { padding-left: 90px; }
.p-left-md-100 { padding-left: 100px; }
.p-left-md-110 { padding-left: 110px; }
.p-left-md-120 { padding-left: 120px; }
.p-left-md-130 { padding-left: 130px; }
.p-left-md-140 { padding-left: 140px; }
.p-left-md-150 { padding-left: 150px; }
.p-left-md-160 { padding-left: 160px; }
.p-left-md-170 { padding-left: 170px; }
.p-left-md-180 { padding-left: 180px; }
.p-left-md-190 { padding-left: 190px; }
.p-left-md-200 { padding-left: 200px; }
.p-right-md-0 { padding-right: 0; }
.p-right-md-5 { padding-right: 5px; }
.p-right-md-10 { padding-right: 10px; }
.p-right-md-20 { padding-right: 20px; }
.p-right-md-30 { padding-right: 30px; }
.p-right-md-40 { padding-right: 40px; }
.p-right-md-50 { padding-right: 50px; }
.p-right-md-60 { padding-right: 60px; }
.p-right-md-70 { padding-right: 70px; }
.p-right-md-80 { padding-right: 80px; }
.p-right-md-90 { padding-right: 90px; }
.p-right-md-100 { padding-right: 100px; }
.p-right-md-110 { padding-right: 110px; }
.p-right-md-120 { padding-right: 120px; }
.p-right-md-130 { padding-right: 130px; }
.p-right-md-140 { padding-right: 140px; }
.p-right-md-150 { padding-right: 150px; }
.p-right-md-160 { padding-right: 160px; }
.p-right-md-170 { padding-right: 170px; }
.p-right-md-180 { padding-right: 180px; }
.p-right-md-190 { padding-right: 190px; }
.p-right-md-200 { padding-right: 200px; }
}
@media (min-width: @screen-lg-min) {
.p-top-lg-0 { padding-top: 0; }
.p-top-lg-5 { padding-top: 5px; }
.p-top-lg-10 { padding-top: 10px; }
.p-top-lg-20 { padding-top: 20px; }
.p-top-lg-30 { padding-top: 30px; }
.p-top-lg-40 { padding-top: 40px; }
.p-top-lg-50 { padding-top: 50px; }
.p-top-lg-60 { padding-top: 60px; }
.p-top-lg-70 { padding-top: 70px; }
.p-top-lg-80 { padding-top: 80px; }
.p-top-lg-90 { padding-top: 90px; }
.p-top-lg-100 { padding-top: 100px; }
.p-top-lg-110 { padding-top: 110px; }
.p-top-lg-120 { padding-top: 120px; }
.p-top-lg-130 { padding-top: 130px; }
.p-top-lg-140 { padding-top: 140px; }
.p-top-lg-150 { padding-top: 150px; }
.p-top-lg-160 { padding-top: 160px; }
.p-top-lg-170 { padding-top: 170px; }
.p-top-lg-180 { padding-top: 180px; }
.p-top-lg-190 { padding-top: 190px; }
.p-top-lg-200 { padding-top: 200px; }
.p-bottom-lg-0 { padding-bottom: 0; }
.p-bottom-lg-5 { padding-bottom: 5px; }
.p-bottom-lg-10 { padding-bottom: 10px; }
.p-bottom-lg-20 { padding-bottom: 20px; }
.p-bottom-lg-30 { padding-bottom: 30px; }
.p-bottom-lg-40 { padding-bottom: 40px; }
.p-bottom-lg-50 { padding-bottom: 50px; }
.p-bottom-lg-60 { padding-bottom: 60px; }
.p-bottom-lg-70 { padding-bottom: 70px; }
.p-bottom-lg-80 { padding-bottom: 80px; }
.p-bottom-lg-90 { padding-bottom: 90px; }
.p-bottom-lg-100 { padding-bottom: 100px; }
.p-bottom-lg-110 { padding-bottom: 110px; }
.p-bottom-lg-120 { padding-bottom: 120px; }
.p-bottom-lg-130 { padding-bottom: 130px; }
.p-bottom-lg-140 { padding-bottom: 140px; }
.p-bottom-lg-150 { padding-bottom: 150px; }
.p-bottom-lg-160 { padding-bottom: 160px; }
.p-bottom-lg-170 { padding-bottom: 170px; }
.p-bottom-lg-180 { padding-bottom: 180px; }
.p-bottom-lg-190 { padding-bottom: 190px; }
.p-bottom-lg-200 { padding-bottom: 200px; }
.p-left-lg-0 { padding-left: 0; }
.p-left-lg-5 { padding-left: 5px; }
.p-left-lg-10 { padding-left: 10px; }
.p-left-lg-20 { padding-left: 20px; }
.p-left-lg-30 { padding-left: 30px; }
.p-left-lg-40 { padding-left: 40px; }
.p-left-lg-50 { padding-left: 50px; }
.p-left-lg-60 { padding-left: 60px; }
.p-left-lg-70 { padding-left: 70px; }
.p-left-lg-80 { padding-left: 80px; }
.p-left-lg-90 { padding-left: 90px; }
.p-left-lg-100 { padding-left: 100px; }
.p-left-lg-110 { padding-left: 110px; }
.p-left-lg-120 { padding-left: 120px; }
.p-left-lg-130 { padding-left: 130px; }
.p-left-lg-140 { padding-left: 140px; }
.p-left-lg-150 { padding-left: 150px; }
.p-left-lg-160 { padding-left: 160px; }
.p-left-lg-170 { padding-left: 170px; }
.p-left-lg-180 { padding-left: 180px; }
.p-left-lg-190 { padding-left: 190px; }
.p-left-lg-200 { padding-left: 200px; }
.p-right-lg-0 { padding-right: 0; }
.p-right-lg-5 { padding-right: 5px; }
.p-right-lg-10 { padding-right: 10px; }
.p-right-lg-20 { padding-right: 20px; }
.p-right-lg-30 { padding-right: 30px; }
.p-right-lg-40 { padding-right: 40px; }
.p-right-lg-50 { padding-right: 50px; }
.p-right-lg-60 { padding-right: 60px; }
.p-right-lg-70 { padding-right: 70px; }
.p-right-lg-80 { padding-right: 80px; }
.p-right-lg-90 { padding-right: 90px; }
.p-right-lg-100 { padding-right: 100px; }
.p-right-lg-110 { padding-right: 110px; }
.p-right-lg-120 { padding-right: 120px; }
.p-right-lg-130 { padding-right: 130px; }
.p-right-lg-140 { padding-right: 140px; }
.p-right-lg-150 { padding-right: 150px; }
.p-right-lg-160 { padding-right: 160px; }
.p-right-lg-170 { padding-right: 170px; }
.p-right-lg-180 { padding-right: 180px; }
.p-right-lg-190 { padding-right: 190px; }
.p-right-lg-200 { padding-right: 200px; }
}
/* Aligning
*/
.left-xs { text-align: left; }
.center-xs { text-align: center; }
.right-xs { text-align: right; }
@media (min-width: @screen-sm-min) {
.left-sm { text-align: left; }
.center-sm { text-align: center; }
.right-sm { text-align: right; }
}
@media (min-width: @screen-md-min) {
.left-md { text-align: left; }
.center-md { text-align: center; }
.right-md { text-align: right; }
}
@media (min-width: @screen-lg-min) {
.left-lg { text-align: left; }
.center-lg { text-align: center; }
.right-lg { text-align: right; }
}
/* Displaying
*/
.hidden-xs { display: none; }
.visible-xs { display: block; }
.visible-xs-i { display: inline; }
.visible-xs-ib { display: inline-block; }
@media (min-width: @screen-sm-min) {
.hidden-sm { display: none; }
.visible-sm { display: block; }
.visible-sm-i { display: inline; }
.visible-sm-ib { display: inline-block; }
}
@media (min-width: @screen-md-min) {
.hidden-md { display: none; }
.visible-md { display: block; }
.visible-md-i { display: inline; }
.visible-md-ib { display: inline-block; }
}
@media (min-width: @screen-lg-min) {
.hidden-lg { display: none; }
.visible-lg { display: block; }
.visible-lg-i { display: inline; }
.visible-lg-ib { display: inline-block; }
}
@jeremykenedy

This comment has been minimized.

Copy link

@jeremykenedy jeremykenedy commented Apr 15, 2017

You can use loops:

Example:

$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

$num-of-classes: 5;
$directions: ('top', 'bottom', 'left', 'right');
$types: ('margin', 'padding');
$queries: (
  $screen-xs: 'xs', 
  $screen-sm: 'sm', 
  $screen-md: 'md', 
  $screen-lg: 'lg'
);
@mixin generate-margins {
  @each $type in $types {  
  	@each $direction in $directions {
  		@for $i from 0 through ($num-of-classes) - 1 {
  			.#{$type}-#{$direction}-#{$i} {
  				#{$type}-#{$direction}: (#{$i}em);
  			}
  		}
  	}  
    @each $query, $z in $queries {  
      @media(min-width: #{$query}) {  
      	@each $direction in $directions {
      		@for $i from 0 through ($num-of-classes) - 1 {
      			.#{$type}-#{$direction}-#{$z}-#{$i} {
      				#{$type}-#{$direction}: (#{$i}em);
      			}
      		}
      	}
      }
    }
  }
}
@include generate-margins();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment