Chris Lloyd
chrislloyd403@gmail.com

Generate useful CSS border/padding classes using LESS loops

2014/10/30

This LESS code uses two loops to generate a stack of useful CSS positioning helper classes, which look like this:

.left10 {
  margin-left: 10px;
}
.right10 {
  margin-right: 10px;
}
.margin10-0 {
  margin-top: 10px;
  margin-bottom: 0px;
}
.padding10-0 {
  padding-top: 10px;
  padding-bottom: 0px;
}

Code follows:

@max: 100;
.i-loop (@i) when (@i <= @max) {
  .left@{i} {
    margin-left: @i * 1px;
  }
  .right@{i} {
    margin-right: @i * 1px;
  }
  .j-loop (@j) when (@j <= @max) {
    .margin@{i}-@{j} {
      margin-top: @i * 1px;
      margin-bottom: @j * 1px;
    }
    .padding@{i}-@{j} {
      padding-top: @i * 1px;
      padding-bottom: @j * 1px;
    }
    .j-loop(@j + 10);
  }
  .j-loop(0);
  .i-loop(@i + 10);
}
.i-loop(0);

Comments

    Leave a comment