Bootstrap响应边距和填充减少/ CSS

发布时间：2020-12-17 21:26:07 所属栏目：安全来源：网络整理

导读：我创建了一系列CSS类来轻松操作各种元素的边距和填充.我还利用媒体查询来创建仅适用于特定屏幕宽度的响应式类.一切看起来都应该有效,但正如你所看到的,我的写作技巧非常缺乏,代码也很庞大！我知道可以使用更少的代码来输出所需的CSS,但是我编写自定义mixin

我创建了一系列CSS类来轻松操作各种元素的边距和填充.我还利用媒体查询来创建仅适用于特定屏幕宽度的响应式类.一切看起来都应该有效,但正如你所看到的,我的写作技巧非常缺乏,代码也很庞大！

我知道可以使用更少的代码来输出所需的CSS,但是我编写自定义mixin和循环的所有尝试都很短.

是否有可能将这段代码减少到一点点光滑？任何帮助,将不胜感激.

干杯!

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

解决方法

尝试：

@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,(@i + 1));
}

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

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

  .what(@i);
  .properties(@class,@grids);

  .whitespace(@positions,(@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,-md);
.whitespace(@positions,-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;
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!