css - Bootstrap 响应式边距和 Padding Less/CSS

Question

我创建了一系列 CSS 类来轻松控制各种元素的边距和填充。我还利用媒体查询来创建仅适用于特定屏幕宽度的响应类。一切似乎都按预期工作，但是正如您所看到的，我的 Less 编写能力极度缺乏并且代码非常庞大!

我知道可以使用更少的代码来输出所需的 CSS，但是我编写自定义混合和循环的所有尝试都失败了。

是否可以将此代码块简化为更流畅的代码？任何帮助将不胜感激。

干杯!

// 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

尝试:

@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);
}

上面的代码编译成如下所示的 CSS 代码:

.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;
  }

}