//
// spacing helpers
//
@spacings: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;

// mixin to iterate over colors and create CSS class for each one
.generate-spacing-helpers(@i: length(@spacings)) when (@i > 0) {
  .generate-spacing-helpers(@i - 1);
  @name: extract(@spacings, @i);
  @space: unit(extract(@spacings, @i), px);

  // margin
  .mt-@{name} {
    margin-top: @space;
  }
  .mr-@{name} {
    margin-right: @space;
  }
  .mb-@{name} {
    margin-bottom: @space;
  }
  .ml-@{name} {
    margin-left: @space;
  }

  // padding
  .pt-@{name} {
    padding-top: @space;
  }
  .pr-@{name} {
    padding-right: @space;
  }
  .pb-@{name} {
    padding-bottom: @space;
  }
  .pl-@{name} {
    padding-left: @space;
  }

  // responsive utilities
  @media (min-width: @screen-sm-min) {
    // margin
    .mt-@{name}-sm {
      margin-top: @space;
    }
    .mr-@{name}-sm {
      margin-right: @space;
    }
    .mb-@{name}-sm {
      margin-bottom: @space;
    }
    .ml-@{name}-sm {
      margin-left: @space;
    }

    // padding
    .pt-@{name}-sm {
      padding-top: @space;
    }
    .pr-@{name}-sm {
      padding-right: @space;
    }
    .pb-@{name}-sm {
      padding-bottom: @space;
    }
    .pl-@{name}-sm {
      padding-left: @space;
    }
  }
}

.generate-spacing-helpers();

Above code will generate the following helper classes: (example for number 10)

.mt-10 {
  margin-top: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.ml-10 {
  margin-left: 10px;
}
.pt-10 {
  padding-top: 10px;
}
.pr-10 {
  padding-right: 10px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pl-10 {
  padding-left: 10px;
}
@media (min-width: 768px) {
  .mt-10-sm {
    margin-top: 10px;
  }
  .mr-10-sm {
    margin-right: 10px;
  }
  .mb-10-sm {
    margin-bottom: 10px;
  }
  .ml-10-sm {
    margin-left: 10px;
  }
  .pt-10-sm {
    padding-top: 10px;
  }
  .pr-10-sm {
    padding-right: 10px;
  }
  .pb-10-sm {
    padding-bottom: 10px;
  }
  .pl-10-sm {
    padding-left: 10px;
  }
}

 

Categories: CSS