Making a quick padding/margin library with loops + arrays in Less

I'm trying to understand the loop and array function in Less (css). But it seems like I can't find any good tutorials on the topic.

More specifically, I'm trying to code a quick padding- & margin class library for Bootstrap 3 using Less. The coder should only change som global variables and the library will rebuild the padding/margin functionality. I want the padding/margin to be responsive. Giving a more spaciesh design on big devices, and not so spaciesh on smaller devices.

I know that the current code is extremly repetitive and will, if I expand it to every device, an extremely long document with code, that isn't gracies nor giving an outside coder a good overview of the function.

So, what can I do to minimize the code into smaller loops and arrays?

//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
   @base-top-space: 100px;
 @base-right-space: 100px;
@base-bottom-space: @base-top-space;
  @base-left-space: @base-right-space;

// Variables for different Types of sizes of space - also refered to in mixin-space as @mixin-space-size
 @space-small:      0.75;
@space-medium:      1;
 @space-large:      1.75;
@space-xlarge:      2.5;

// Variables for different types of devices - also refered to in mixin-space as @mixin-space-device
@space-xs:  0.5;
@space-sm:  1;
@space-md:  1.25;
@space-lg:  1.5;

//Variables of types of space in mixin
// Padding
@space-type-padding-top:    escape('padding:');
@space-type-padding-top:    escape('padding-top:');
@space-type-padding-right:  escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left:   escape('padding-left:');

// Margin
@space-type-margin:         escape('margin:');
@space-type-margin-top:     escape('margin-top:');
@space-type-margin-right:   escape('margin-right:');
@space-type-margin-bottom:  escape('margin-bottom:');
@space-type-margin-left:    escape('margin-left:');



// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
// 
//      Local variables         Global variables:
//      ===============         ================
// Eg.: mixin-space-type    =   @space-type-padding-top
// Eg.: mixin-space-value   =   @base-top-space
// Eg.: mixin-space-size    =   @space-small, @space-medium, @space-large, @space-xlarge
// Eg.: mixin-space-device  =   @space-xs, @space-sm, @space-md, @space-lg

.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
    @mixin-space-type abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}



// The following media queries beloow generates different types of padding sizes.
//    Top: .pad-top-s,      .pad-top-m,     .pad-top-l,     .pad-top-xl
//  Right: .pad-right-s,    .pad-right-m,   .pad-right-l,   .pad-right-xl
//   Left: .pad-left-s,     .pad-left-m,    .pad-left-l,    .pad-left-xl
// Bottom: .pad-bottom-s,   .pad-bottom-m,  .pad-bottom-l,  .pad-bottom-xl

// The following media queries beloow generates different types of margin sizes.
//    Top: .mar-top-s,      .mar-top-m,     .mar-top-l,     .mar-top-xl
//  Right: .mar-right-s,    .mar-right-m,   .mar-right-l,   .mar-right-xl
//   Left: .mar-left-s,     .mar-left-m,    .mar-left-l,    .mar-left-xl
// Bottom: .mar-bottom-s,   .mar-bottom-m,  .mar-bottom-l,  .mar-bottom-xl

@media (max-width: @screen-xs-max) {
    .lg-md-content-margin {
        margin-top: 0px;
    }

    .pad {
        &-top {
            &-s {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-xlarge, @space-xs);
            }
        }

        &-bot {
            &-s {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-xlarge, @space-xs);
            }
        }

        &-right {
            &-s {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-xlarge, @space-xs);
            }
        }

        &-left {
            &-s {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-xlarge, @space-xs);
            }
        }
    }

    .mar {
        &-top {
            &-s {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-xlarge, @space-xs);
            }
        }

        &-bot {
            &-s {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-xlarge, @space-xs);
            }
        }

        &-right {
            &-s {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-xlarge, @space-xs);
            }
        }

        &-left {
            &-s {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-xlarge, @space-xs);
            }
        }
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    // redo the whole process and changing some global variables
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    // redo the whole process and changing some global variables
}

@media (min-width: @screen-lg-min) {
    // redo the whole process and changing some global variables
}