utility.margins.less

// margin
@u-m-dirs: t top, r right, b bottom, l left;
@u-m-opts: '' 40px, '\+' 60px, '\+\+' 80px, '-' 20px, '--' 10px, '0' 0px;
.loopmarginoptions(@dir-class, @dir, @iterator:1) when(@iterator <= length(@u-m-opts)) {
  @u-m-class: extract(extract(@u-m-opts, @iterator), 1);
  @u-m-dist: extract(extract(@u-m-opts, @iterator), 2);
  @class: ~"u-m@{dir-class}@{u-m-class}";
  .@{class} {
    margin-@{dir}: @u-m-dist;
  }
  .loopmarginoptions(@dir-class, @dir, (@iterator + 1));
}
.loopmarginutilityclasses(@iterator:1) when(@iterator <= length(@u-m-dirs)) {
  @u-m-class: extract(extract(@u-m-dirs, @iterator), 1);
  @u-m-dir: extract(extract(@u-m-dirs, @iterator), 2);
  .loopmarginoptions(@u-m-class, @u-m-dir);
  .loopmarginutilityclasses((@iterator + 1));
}
.loopmarginutilityclasses();

utility_margin.css

.u-mt {
  margin-top: 40px;
}
.u-mt\+ {
  margin-top: 60px;
}
.u-mt\+\+ {
  margin-top: 80px;
}
.u-mt- {
  margin-top: 20px;
}
.u-mt-- {
  margin-top: 10px;
}
.u-mt0 {
  margin-top: 0px;
}
.u-mr {
  margin-right: 40px;
}
.u-mr\+ {
  margin-right: 60px;
}
.u-mr\+\+ {
  margin-right: 80px;
}
.u-mr- {
  margin-right: 20px;
}
.u-mr-- {
  margin-right: 10px;
}
.u-mr0 {
  margin-right: 0px;
}
.u-mb {
  margin-bottom: 40px;
}
.u-mb\+ {
  margin-bottom: 60px;
}
.u-mb\+\+ {
  margin-bottom: 80px;
}
.u-mb- {
  margin-bottom: 20px;
}
.u-mb-- {
  margin-bottom: 10px;
}
.u-mb0 {
  margin-bottom: 0px;
}
.u-ml {
  margin-left: 40px;
}
.u-ml\+ {
  margin-left: 60px;
}
.u-ml\+\+ {
  margin-left: 80px;
}
.u-ml- {
  margin-left: 20px;
}
.u-ml-- {
  margin-left: 10px;
}
.u-ml0 {
  margin-left: 0px;
}