shido/src/less/utility-classes/margin.less

Build fast with Shido, a CSS framework for building custom designs without any annoying style or component you have to fight to override.

each(@breakpoints-min, .(@px, @breakpoint) {
  @media (min-width: @px) {
    each(range(0, @s-max-margin, @s-increment-mp), .(@loop) {
      @mrg: @loop * 1px;

      .@{breakpoint}\:mrg-bt-@{loop} {
        margin-bottom: @mrg;
        margin-top: @mrg;
      }
      .@{breakpoint}\:mrg-lr-@{loop} {
        margin-left: @mrg;
        margin-right: @mrg;
      }
      .@{breakpoint}\:mrg-bottom-@{loop} {
        margin-bottom: @mrg;
      }
      .@{breakpoint}\:mrg-left-@{loop} {
        margin-left: @mrg;
      }
      .@{breakpoint}\:mrg-right-@{loop} {
        margin-right: @mrg;
      }
      .@{breakpoint}\:mrg-top-@{loop} {
        margin-top: @mrg;
      }
      .@{breakpoint}\:mrg-all-@{loop} {
        margin-bottom: @mrg;
        margin-left: @mrg;
        margin-right: @mrg;
        margin-top: @mrg;
      }

      .@{breakpoint}\:-mrg-bt-@{loop} {
        margin-bottom: -@mrg;
        margin-top: -@mrg;
      }
      .@{breakpoint}\:-mrg-lr-@{loop} {
        margin-left: -@mrg;
        margin-right: -@mrg;
      }
      .@{breakpoint}\:-mrg-bottom-@{loop} {
        margin-bottom: -@mrg;
      }
      .@{breakpoint}\:-mrg-left-@{loop} {
        margin-left: -@mrg;
      }
      .@{breakpoint}\:-mrg-right-@{loop} {
        margin-right: -@mrg;
      }
      .@{breakpoint}\:-mrg-top-@{loop} {
        margin-top: -@mrg;
      }
      .@{breakpoint}\:-mrg-all-@{loop} {
        margin-bottom: -@mrg;
        margin-left: -@mrg;
        margin-right: -@mrg;
        margin-top: -@mrg;
      }
    })
  }
})