Bootstrap Responsive Margins & Padding Less/CSS

Question

I've created a series of CSS classes to easily manipulate the margins and padding of various elements. I've also utilized media queries to create responsive classes that only apply at certain screen widths. Everything appears to work as it should, but as you can see, my Less writing skills are extremely lacking and the code is huge!

I know far less code could be used to output the required CSS, but all of my attempts to write the custom mixin's and loops have come up short.

Is it possible to reduce this block of code to something a little slicker? Any help would be appreciated.

Cheers!

// Margins and padding
// -------------------------

// Horizontal and vertical offset values
@x-0:       0;
@x-xs:      (@grid-gutter-width / 4);
@x-sm:      (@grid-gutter-width / 2);
@x-md:      @grid-gutter-width;
@x-lg:      (@grid-gutter-width * 2);
@x-xl:      (@grid-gutter-width * 4);

@y-0:       0;
@y-xs:      (@line-height-computed / 4);
@y-sm:      (@line-height-computed / 2);
@y-md:      @line-height-computed;
@y-lg:      (@line-height-computed * 2);
@y-xl:      (@line-height-computed * 4);

// Static margins
.mt-0  { margin-top: @y-0; }
.mt-xs { margin-top: @y-xs; }
.mt-sm { margin-top: @y-sm; }
.mt-md { margin-top: @y-md; }
.mt-lg { margin-top: @y-lg; }
.mt-xl { margin-top: @y-xl; }

.mr-0  { margin-right: @x-0; }
.mr-xs { margin-right: @x-xs; }
.mr-sm { margin-right: @x-sm; }
.mr-md { margin-right: @x-md; }
.mr-lg { margin-right: @x-lg; }
.mr-xl { margin-right: @x-xl; }

.mb-0  { margin-bottom: @y-0; }
.mb-xs { margin-bottom: @y-xs; }
.mb-sm { margin-bottom: @y-sm; }
.mb-md { margin-bottom: @y-md; }
.mb-lg { margin-bottom: @y-lg; }
.mb-xl { margin-bottom: @y-xl; }

.ml-0  { margin-left: @x-0; }
.ml-xs { margin-left: @x-xs; }
.ml-sm { margin-left: @x-sm; }
.ml-md { margin-left: @x-md; }
.ml-lg { margin-left: @x-lg; }
.ml-xl { margin-left: @x-xl; }

// Responsive margins
@media (max-width: @screen-xs-max) {
    .mt-0-sm  { margin-top: @y-0; }
    .mt-xs-sm { margin-top: @y-xs; }
    .mt-sm-sm { margin-top: @y-sm; }
    .mt-md-sm { margin-top: @y-md; }
    .mt-lg-sm { margin-top: @y-lg; }
    .mt-xl-sm { margin-top: @y-xl; }

    .mr-0-sm  { margin-right: @x-0; }
    .mr-xs-sm { margin-right: @x-xs; }
    .mr-sm-sm { margin-right: @x-sm; }
    .mr-md-sm { margin-right: @x-md; }
    .mr-lg-sm { margin-right: @x-lg; }
    .mr-xl-sm { margin-right: @x-xl; }

    .mb-0-sm  { margin-bottom: @y-0; }
    .mb-xs-sm { margin-bottom: @y-xs; }
    .mb-sm-sm { margin-bottom: @y-sm; }
    .mb-md-sm { margin-bottom: @y-md; }
    .mb-lg-sm { margin-bottom: @y-lg; }
    .mb-xl-sm { margin-bottom: @y-xl; }

    .ml-0-sm  { margin-left: @x-0; }
    .ml-xs-sm { margin-left: @x-xs; }
    .ml-sm-sm { margin-left: @x-sm; }
    .ml-md-sm { margin-left: @x-md; }
    .ml-lg-sm { margin-left: @x-lg; }
    .ml-xl-sm { margin-left: @x-xl; }
}
@media (max-width: @screen-sm-max) {
    .mt-0-md  { margin-top: @y-0; }
    .mt-xs-md { margin-top: @y-xs; }
    .mt-sm-md { margin-top: @y-sm; }
    .mt-md-md { margin-top: @y-md; }
    .mt-lg-md { margin-top: @y-lg; }
    .mt-xl-md { margin-top: @y-xl; }

    .mr-0-md  { margin-right: @x-0; }
    .mr-xs-md { margin-right: @x-xs; }
    .mr-sm-md { margin-right: @x-sm; }
    .mr-md-md { margin-right: @x-md; }
    .mr-lg-md { margin-right: @x-lg; }
    .mr-xl-md { margin-right: @x-xl; }

    .mb-0-md  { margin-bottom: @y-0; }
    .mb-xs-md { margin-bottom: @y-xs; }
    .mb-sm-md { margin-bottom: @y-sm; }
    .mb-md-md { margin-bottom: @y-md; }
    .mb-lg-md { margin-bottom: @y-lg; }
    .mb-xl-md { margin-bottom: @y-xl; }

    .ml-0-md  { margin-left: @x-0; }
    .ml-xs-md { margin-left: @x-xs; }
    .ml-sm-md { margin-left: @x-sm; }
    .ml-md-md { margin-left: @x-md; }
    .ml-lg-md { margin-left: @x-lg; }
    .ml-xl-md { margin-left: @x-xl; }
}
@media (max-width: @screen-md-max) {
    .mt-0-lg  { margin-top: @y-0; }
    .mt-xs-lg { margin-top: @y-xs; }
    .mt-sm-lg { margin-top: @y-sm; }
    .mt-md-lg { margin-top: @y-md; }
    .mt-lg-lg { margin-top: @y-lg; }
    .mt-xl-lg { margin-top: @y-xl; }

    .mr-0-lg  { margin-right: @x-0; }
    .mr-xs-lg { margin-right: @x-xs; }
    .mr-sm-lg { margin-right: @x-sm; }
    .mr-md-lg { margin-right: @x-md; }
    .mr-lg-lg { margin-right: @x-lg; }
    .mr-xl-lg { margin-right: @x-xl; }

    .mb-0-lg  { margin-bottom: @y-0; }
    .mb-xs-lg { margin-bottom: @y-xs; }
    .mb-sm-lg { margin-bottom: @y-sm; }
    .mb-md-lg { margin-bottom: @y-md; }
    .mb-lg-lg { margin-bottom: @y-lg; }
    .mb-xl-lg { margin-bottom: @y-xl; }

    .ml-0-lg  { margin-left: @x-0; }
    .ml-xs-lg { margin-left: @x-xs; }
    .ml-sm-lg { margin-left: @x-sm; }
    .ml-md-lg { margin-left: @x-md; }
    .ml-lg-lg { margin-left: @x-lg; }
    .ml-xl-lg { margin-left: @x-xl; }
}

// Static padding
.pt-0  { padding-top: @y-0; }
.pt-xs { padding-top: @y-xs; }
.pt-sm { padding-top: @y-sm; }
.pt-md { padding-top: @y-md; }
.pt-lg { padding-top: @y-lg; }
.pt-xl { padding-top: @y-xl; }

.pr-0  { padding-right: @x-0; }
.pr-xs { padding-right: @x-xs; }
.pr-sm { padding-right: @x-sm; }
.pr-md { padding-right: @x-md; }
.pr-lg { padding-right: @x-lg; }
.pr-xl { padding-right: @x-xl; }

.pb-0  { padding-bottom: @y-0; }
.pb-xs { padding-bottom: @y-xs; }
.pb-sm { padding-bottom: @y-sm; }
.pb-md { padding-bottom: @y-md; }
.pb-lg { padding-bottom: @y-lg; }
.pb-xl { padding-bottom: @y-xl; }

.pl-0  { padding-left: @x-0; }
.pl-xs { padding-left: @x-xs; }
.pl-sm { padding-left: @x-sm; }
.pl-md { padding-left: @x-md; }
.pl-lg { padding-left: @x-lg; }
.pl-xl { padding-left: @x-xl; }

// Responsive padding
@media (max-width: @screen-xs-max) {
    .pt-0-sm  { padding-top: @y-0; }
    .pt-xs-sm { padding-top: @y-xs; }
    .pt-sm-sm { padding-top: @y-sm; }
    .pt-md-sm { padding-top: @y-md; }
    .pt-lg-sm { padding-top: @y-lg; }
    .pt-xl-sm { padding-top: @y-xl; }

    .pr-0-sm  { padding-right: @x-0; }
    .pr-xs-sm { padding-right: @x-xs; }
    .pr-sm-sm { padding-right: @x-sm; }
    .pr-md-sm { padding-right: @x-md; }
    .pr-lg-sm { padding-right: @x-lg; }
    .pr-xl-sm { padding-right: @x-xl; }

    .pb-0-sm  { padding-bottom: @y-0; }
    .pb-xs-sm { padding-bottom: @y-xs; }
    .pb-sm-sm { padding-bottom: @y-sm; }
    .pb-md-sm { padding-bottom: @y-md; }
    .pb-lg-sm { padding-bottom: @y-lg; }
    .pb-xl-sm { padding-bottom: @y-xl; }

    .pl-0-sm  { padding-left: @x-0; }
    .pl-xs-sm { padding-left: @x-xs; }
    .pl-sm-sm { padding-left: @x-sm; }
    .pl-md-sm { padding-left: @x-md; }
    .pl-lg-sm { padding-left: @x-lg; }
    .pl-xl-sm { padding-left: @x-xl; }
}
@media (max-width: @screen-sm-max) {
    .pt-0-md  { padding-top: @y-0; }
    .pt-xs-md { padding-top: @y-xs; }
    .pt-sm-md { padding-top: @y-sm; }
    .pt-md-md { padding-top: @y-md; }
    .pt-lg-md { padding-top: @y-lg; }
    .pt-xl-md { padding-top: @y-xl; }

    .pr-0-md  { padding-right: @x-0; }
    .pr-xs-md { padding-right: @x-xs; }
    .pr-sm-md { padding-right: @x-sm; }
    .pr-md-md { padding-right: @x-md; }
    .pr-lg-md { padding-right: @x-lg; }
    .pr-xl-md { padding-right: @x-xl; }

    .pb-0-md  { padding-bottom: @y-0; }
    .pb-xs-md { padding-bottom: @y-xs; }
    .pb-sm-md { padding-bottom: @y-sm; }
    .pb-md-md { padding-bottom: @y-md; }
    .pb-lg-md { padding-bottom: @y-lg; }
    .pb-xl-md { padding-bottom: @y-xl; }

    .pl-0-md  { padding-left: @x-0; }
    .pl-xs-md { padding-left: @x-xs; }
    .pl-sm-md { padding-left: @x-sm; }
    .pl-md-md { padding-left: @x-md; }
    .pl-lg-md { padding-left: @x-lg; }
    .pl-xl-md { padding-left: @x-xl; }
}
@media (max-width: @screen-md-max) {
    .pt-0-lg  { padding-top: @y-0; }
    .pt-xs-lg { padding-top: @y-xs; }
    .pt-sm-lg { padding-top: @y-sm; }
    .pt-md-lg { padding-top: @y-md; }
    .pt-lg-lg { padding-top: @y-lg; }
    .pt-xl-lg { padding-top: @y-xl; }

    .pr-0-lg  { padding-right: @x-0; }
    .pr-xs-lg { padding-right: @x-xs; }
    .pr-sm-lg { padding-right: @x-sm; }
    .pr-md-lg { padding-right: @x-md; }
    .pr-lg-lg { padding-right: @x-lg; }
    .pr-xl-lg { padding-right: @x-xl; }

    .pb-0-lg  { padding-bottom: @y-0; }
    .pb-xs-lg { padding-bottom: @y-xs; }
    .pb-sm-lg { padding-bottom: @y-sm; }
    .pb-md-lg { padding-bottom: @y-md; }
    .pb-lg-lg { padding-bottom: @y-lg; }
    .pb-xl-lg { padding-bottom: @y-xl; }

    .pl-0-lg  { padding-left: @x-0; }
    .pl-xs-lg { padding-left: @x-xs; }
    .pl-sm-lg { padding-left: @x-sm; }
    .pl-md-lg { padding-left: @x-md; }
    .pl-lg-lg { padding-left: @x-lg; }
    .pl-xl-lg { padding-left: @x-xl; }
}

Answer 1

try:

@grid-gutter-width: 20px;
@line-height-computed: 40px;

// Margins and padding
// -------------------------

// Horizontal and vertical offset values
@x-0:       0;
@x-xs:      (@grid-gutter-width / 4);
@x-sm:      (@grid-gutter-width / 2);
@x-md:      @grid-gutter-width;
@x-lg:      (@grid-gutter-width * 2);
@x-xl:      (@grid-gutter-width * 4);

@y-0:       0;
@y-xs:      (@line-height-computed / 4);
@y-sm:      (@line-height-computed / 2);
@y-md:      @line-height-computed;
@y-lg:      (@line-height-computed * 2);
@y-xl:      (@line-height-computed * 4);

@positions: t top, r right, b bottom, l left;
@grids: 0, xs, md, lg, xl;

.what(@i) when (mod(@i, 2) = 0) {
  @what: x;
}
.what(@i) when (default()) {
  @what: y;
}

.properties(@prefix, @postfix, @whitespace, @what, @position, @grids, @i: 1) when (@i <= length(@grids)) {

  @grid: extract(@grids,@i);

  .m@{prefix}-@{grid}@{postfix} {
    @var: ~"@{what}-@{grid}";
    @{whitespace}-@{position}: @@var;

  }

  .properties(@prefix, @postfix, @whitespace, @what, @position, @grids, (@i + 1));
}

.whitespace(@positions, @whitespace: margin, @postfix: ~"", @i: 1) when (@i <= length(@positions)) {

  @class: extract(extract(@positions, @i), 1); 
  @position: extract(extract(@positions, @i), 2);

  .what(@i);
  .properties(@class, @postfix, @whitespace, @what, @position, @grids);

  .whitespace(@positions, @whitespace, @postfix, (@i + 1));
}

.whitespace(@positions);
.whitespace(@positions, padding);

@screen-xs-max: 767px;
@screen-sm-max: 767px;

// Responsive
@media (max-width: @screen-xs-max) {
.whitespace(@positions, margin, -sm);
.whitespace(@positions, padding, -sm);
}

@media (max-width: @screen-sm-max) {
.whitespace(@positions, margin, -md);
.whitespace(@positions, padding, -md);
}

The above compiles into the CSS code like that shown beneath:

.mt-0 {
  margin-top: 0;
}
.mt-xs {
  margin-top: 10px;
}
.mt-md {
  margin-top: 40px;
}
.mt-lg {
  margin-top: 80px;
}
.mt-xl {
  margin-top: 160px;
}
.mr-0 {
  margin-right: 0;
}
.mr-xs {
  margin-right: 5px;
}
.mr-md {
  margin-right: 20px;
}
.mr-lg {
  margin-right: 40px;
}
.mr-xl {
  margin-right: 80px;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-xs {
  margin-bottom: 10px;
}
.mb-md {
  margin-bottom: 40px;
}
.mb-lg {
  margin-bottom: 80px;
}
.mb-xl {
  margin-bottom: 160px;
}
.ml-0 {
  margin-left: 0;
}
.ml-xs {
  margin-left: 5px;
}
.ml-md {
  margin-left: 20px;
}
.ml-lg {
  margin-left: 40px;
}
.ml-xl {
  margin-left: 80px;
}
.mt-0 {
  padding-top: 0;
}
.mt-xs {
  padding-top: 10px;
}
.mt-md {
  padding-top: 40px;
}
.mt-lg {
  padding-top: 80px;
}
.mt-xl {
  padding-top: 160px;
}
.mr-0 {
  padding-right: 0;
}
.mr-xs {
  padding-right: 5px;
}
.mr-md {
  padding-right: 20px;
}
.mr-lg {
  padding-right: 40px;
}
.mr-xl {
  padding-right: 80px;
}
.mb-0 {
  padding-bottom: 0;
}
.mb-xs {
  padding-bottom: 10px;
}
.mb-md {
  padding-bottom: 40px;
}
.mb-lg {
  padding-bottom: 80px;
}
.mb-xl {
  padding-bottom: 160px;
}
.ml-0 {
  padding-left: 0;
}
.ml-xs {
  padding-left: 5px;
}
.ml-md {
  padding-left: 20px;
}
.ml-lg {
  padding-left: 40px;
}
.ml-xl {
  padding-left: 80px;
}
@media (max-width: 767px) {
  .mt-0-sm {
    margin-top: 0;
  }
  .mt-xs-sm {
    margin-top: 10px;
  }
  .mt-md-sm {
    margin-top: 40px;
  }
  .mt-lg-sm {
    margin-top: 80px;
  }
  .mt-xl-sm {
    margin-top: 160px;
  }
  .mr-0-sm {
    margin-right: 0;
  }
  .mr-xs-sm {
    margin-right: 5px;
  }
  .mr-md-sm {
    margin-right: 20px;
  }
  .mr-lg-sm {
    margin-right: 40px;
  }
  .mr-xl-sm {
    margin-right: 80px;
  }
  .mb-0-sm {
    margin-bottom: 0;
  }
  .mb-xs-sm {
    margin-bottom: 10px;
  }
  .mb-md-sm {
    margin-bottom: 40px;
  }
  .mb-lg-sm {
    margin-bottom: 80px;
  }
  .mb-xl-sm {
    margin-bottom: 160px;
  }
  .ml-0-sm {
    margin-left: 0;
  }
  .ml-xs-sm {
    margin-left: 5px;
  }
  .ml-md-sm {
    margin-left: 20px;
  }
  .ml-lg-sm {
    margin-left: 40px;
  }
  .ml-xl-sm {
    margin-left: 80px;
  }
  .mt-0-sm {
    padding-top: 0;
  }
  .mt-xs-sm {
    padding-top: 10px;
  }
  .mt-md-sm {
    padding-top: 40px;
  }
  .mt-lg-sm {
    padding-top: 80px;
  }
  .mt-xl-sm {
    padding-top: 160px;
  }
  .mr-0-sm {
    padding-right: 0;
  }
  .mr-xs-sm {
    padding-right: 5px;
  }
  .mr-md-sm {
    padding-right: 20px;
  }
  .mr-lg-sm {
    padding-right: 40px;
  }
  .mr-xl-sm {
    padding-right: 80px;
  }
  .mb-0-sm {
    padding-bottom: 0;
  }
  .mb-xs-sm {
    padding-bottom: 10px;
  }
  .mb-md-sm {
    padding-bottom: 40px;
  }
  .mb-lg-sm {
    padding-bottom: 80px;
  }
  .mb-xl-sm {
    padding-bottom: 160px;
  }
  .ml-0-sm {
    padding-left: 0;
  }
  .ml-xs-sm {
    padding-left: 5px;
  }
  .ml-md-sm {
    padding-left: 20px;
  }
  .ml-lg-sm {
    padding-left: 40px;
  }
  .ml-xl-sm {
    padding-left: 80px;
  }
}
@media (max-width: 767px) {
  .mt-0-md {
    margin-top: 0;
  }
  .mt-xs-md {
    margin-top: 10px;
  }
  .mt-md-md {
    margin-top: 40px;
  }
  .mt-lg-md {
    margin-top: 80px;
  }
  .mt-xl-md {
    margin-top: 160px;
  }
  .mr-0-md {
    margin-right: 0;
  }
  .mr-xs-md {
    margin-right: 5px;
  }
  .mr-md-md {
    margin-right: 20px;
  }
  .mr-lg-md {
    margin-right: 40px;
  }
  .mr-xl-md {
    margin-right: 80px;
  }
  .mb-0-md {
    margin-bottom: 0;
  }
  .mb-xs-md {
    margin-bottom: 10px;
  }
  .mb-md-md {
    margin-bottom: 40px;
  }
  .mb-lg-md {
    margin-bottom: 80px;
  }
  .mb-xl-md {
    margin-bottom: 160px;
  }
  .ml-0-md {
    margin-left: 0;
  }
  .ml-xs-md {
    margin-left: 5px;
  }
  .ml-md-md {
    margin-left: 20px;
  }
  .ml-lg-md {
    margin-left: 40px;
  }
  .ml-xl-md {
    margin-left: 80px;
  }
  .mt-0-md {
    padding-top: 0;
  }
  .mt-xs-md {
    padding-top: 10px;
  }
  .mt-md-md {
    padding-top: 40px;
  }
  .mt-lg-md {
    padding-top: 80px;
  }
  .mt-xl-md {
    padding-top: 160px;
  }
  .mr-0-md {
    padding-right: 0;
  }
  .mr-xs-md {
    padding-right: 5px;
  }
  .mr-md-md {
    padding-right: 20px;
  }
  .mr-lg-md {
    padding-right: 40px;
  }
  .mr-xl-md {
    padding-right: 80px;
  }
  .mb-0-md {
    padding-bottom: 0;
  }
  .mb-xs-md {
    padding-bottom: 10px;
  }
  .mb-md-md {
    padding-bottom: 40px;
  }
  .mb-lg-md {
    padding-bottom: 80px;
  }
  .mb-xl-md {
    padding-bottom: 160px;
  }
  .ml-0-md {
    padding-left: 0;
  }
  .ml-xs-md {
    padding-left: 5px;
  }
  .ml-md-md {
    padding-left: 20px;
  }
  .ml-lg-md {
    padding-left: 40px;
  }
  .ml-xl-md {
    padding-left: 80px;
  }

}

Answer 2

Many thanks to Bass Jobsen for doing the majority of the legwork here! For those of you who may be interested, here is the final version I'm using now:

@grid-gutter-width: 16px;
@line-height-computed: 16px;

@screen-xs-max: 767px;
@screen-sm-max: 991px;
@screen-md-max: 1199px;

// Horizontal and vertical offsets
@x-0:       0;
@x-xs:      (@grid-gutter-width / 4);    // 4px
@x-sm:      (@grid-gutter-width / 2);    // 8px
@x-md:      @grid-gutter-width;          // 16px
@x-lg:      (@grid-gutter-width * 2);    // 32px
@x-xl:      (@grid-gutter-width * 4);    // 64px

@y-0:       0;
@y-xs:      (@line-height-computed / 4); // 4px
@y-sm:      (@line-height-computed / 2); // 8px
@y-md:      @line-height-computed;       // 16px
@y-lg:      (@line-height-computed * 2); // 32px
@y-xl:      (@line-height-computed * 4); // 64px

@positions: t top, r right, b bottom, l left;
@sizes: 0, xs, sm, md, lg, xl;

.axis(@i) when (mod(@i, 2) = 0) {
    @axis: x;
}
.axis(@i) when (default()) {
    @axis: y;
}

.prop(@property) when (@property = margin) {
    @prop: m;
}
.prop(@property) when (@property = padding) {
    @prop: p;
}

.rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position, @i: 1) when (@i <= length(@sizes)) {

    @size: extract(@sizes, @i);
    @offset: ~"@{axis}-@{size}";

    .@{prop}@{pos}-@{size}@{postfix} {
        @{property}-@{position}: @@offset;
    }

    .rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position, (@i + 1));
}

.ruleset(@positions, @property, @postfix: ~"", @i: 1) when (@i <= length(@positions)) {

    @pos: extract(extract(@positions, @i), 1); 
    @position: extract(extract(@positions, @i), 2);

    .axis(@i);
    .prop(@property);

    .rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position);

    .ruleset(@positions, @property, @postfix, (@i + 1));
}

// Margin & padding modifiers
.ruleset(@positions, margin);
.ruleset(@positions, padding);

// Responsive margin & padding modifiers
@media (max-width: @screen-xs-max) {
    .ruleset(@positions, margin, -sm);
    .ruleset(@positions, padding, -sm);
}

@media (max-width: @screen-sm-max) {
    .ruleset(@positions, margin, -md);
    .ruleset(@positions, padding, -md);
}

@media (max-width: @screen-md-max) {
    .ruleset(@positions, margin, -lg);
    .ruleset(@positions, padding, -lg);
}