.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

@for $i from 1 through 10 {
  .wid-#{$i} {
    width: (10% * $i);
  }
  .hei-#{$i} {
    height: (10% * $i);
  }
}

.margin {
  margin: 0.5rem;
}

.margin-left {
  margin-left: 0.5rem;
}

.margin-right {
  margin-right: 0.5rem;
}

.margin-top {
  margin-top: 0.5rem;
}

.margin-bottom {
  margin-bottom: 0.5rem;
}

.padding {
  padding: 0.5rem;
}

.padding-left {
  padding-left: 0.5rem;
}

.padding-right {
  margin-right: 0.5rem;
}

.padding-top {
  margin-top: 0.5rem;
}

.padding-bottom {
  margin-bottom: 0.5rem;
}