.create-spacing-single(@name, @property, @size, @size-name, @suffix: ~'') {
    .@{name}-@{size-name}@{suffix} { @{property}: @size; }
    .@{name}-@{size-name}-@{spacing-identifier-top}@{suffix} { @{property}-top: @size; }
    .@{name}-@{size-name}-@{spacing-identifier-right}@{suffix} { @{property}-right: @size; }
    .@{name}-@{size-name}-@{spacing-identifier-bottom}@{suffix} { @{property}-bottom: @size; }
    .@{name}-@{size-name}-@{spacing-identifier-left}@{suffix} { @{property}-left: @size; }
    .@{name}-@{size-name}-@{spacing-identifier-horizontal}@{suffix} {
        @{property}-right: @size;
        @{property}-left: @size;
    }
    .@{name}-@{size-name}-@{spacing-identifier-vertical}@{suffix} {
        @{property}-top: @size;
        @{property}-bottom: @size;
    }
}

.create-spacing-pair(@size, @size-name, @suffix: ~'') {
    .create-spacing-single(p, padding, @size, @size-name, @suffix);
    .create-spacing-single(m, margin, @size, @size-name, @suffix);
}

.create-spacing-set(@suffix: ~'') {
    .create-spacing-pair(0, none, @suffix);
    .create-spacing-pair(@base-spacing-ms, ms, @suffix);
    .create-spacing-pair(@base-spacing-xs, xs, @suffix);
    .create-spacing-pair(@base-spacing-sm, sm, @suffix);
    .create-spacing-pair(@base-spacing-md, md, @suffix);
    .create-spacing-pair(@base-spacing-lg, lg, @suffix);
}

.create-spacing() {
    .create-spacing-set();
    .screen-ms({ .create-spacing-set(~'@{spacing-separator-viewport}ms'); });
    .screen-sm({ .create-spacing-set(~'@{spacing-separator-viewport}sm'); });
    .screen-md({ .create-spacing-set(~'@{spacing-separator-viewport}md'); });
    .screen-lg({ .create-spacing-set(~'@{spacing-separator-viewport}lg'); });
}